reactjs - onChange event doesnt work on mobile baffled

Question

I have an issue where I implemented a search grid that works perfectly fine on PC but not on mobile devices. Ive tried other suggested answers to similar questions to no avail. On PC all of the cards show up and I can dynamically filter through them by simply typing into the input. However when I try on mobile, all of the cards show up but I cannot filter anything. Im guessing its something to do with the onChange event in the input but Im clueless at this point. I am working with Reactjs w hooks. Any help would be appreciated. Thanks.

function App() {
  const [postSearch, setPostSearch] = useState({
    title: "",
    content: "",
  });

  function dynaSearch(event) {
    const { name, value } = event.target;

    setPostSearch((prevPostSearch) => {
      console.log(prevPostSearch);

      return {
        ...prevPostSearch,
        [name]: value,
      };
    });
  }

...

    <form>
      <input
        style={{
          margin: "1rem 0rem 1rem 0rem",
          border: 0,
          height: "3rem",
          borderRadius: "10px 0rem 0rem 10px",
        }}
        value={postSearch.title}
        name="title"
        type="text"
        placeholder="  Search for a Wiki ...  ??"
        onChange={dynaSearch}
        onTouchEnd={dynaSearch}
      ></input>
      <button
        style={{
          margin: "1rem 0rem 1rem 0rem",
          border: 0,
          height: "3.18rem",
          width: "4rem",
          borderRadius: "0rem 10px 10px 0rem",
          color: "#D4EDF7",
          backgroundColor: "#4424D6",
          fontWeight: 800,
        }}
      >
        Submit
      </button>
    </form>
    <hr></hr>
  </div>

  <div className="post">
    <DataFetching search={postSearch.title} />
  </div>

...

const filteredPosts = posts.filter((post, index) => {
  return post.title.toLowerCase().includes(props.search);
});`

Answer 1

I am confident it will be to with casing. I have experienced this same frustrating issue (frustrating because it’s hard to spot!). On mobile devices, the device automatically capitalizes the first letter you type. Try setting the input to lowercase before setting to state