My react input field don't work on IOS Safari (I haven't tried other ios browsers)

crayonne 0
Viewed 21

https://droplike.netlify.app/

This is one of the projects I'm working on and it works well on my android chrome app and on my computer, but the input field(Login page) just never updates on safari on my IOS. What could be wrong? I have this issue with all my react apps.

Input State

    const [inputValue, setInputValue] = useState({
        username: "",
        password: "",
    });

Here is the form input.

            <input
          autoComplete="true"
          type="text"
          placeholder="username"
          value={inputValue.username}
          onChange={(e) =>
            setInputValue((prev) => ({...inputValue, username: e.target.value,}))
          }
          required={true}
        />
        <input
          type="password"
          autoComplete="true"
          placeholder="password"
          value={inputValue.password}
          onChange={(e) =>
            setInputValue((prev) => ({...inputValue, password: e.target.value,}))
          }
          required={true}
        />
reactjs javascript
1 Answers

You're pretty close. But you're missing the most important part.

You have:

setInputValue((prev) => ({...inputValue, password: e.target.value,}))

The correct way would be:

setInputValue((prev) => ({...prev, password: e.target.value,}))

You can see the online example: https://1cov7l.csb.app/

You can read the code here: https://codesandbox.io/s/keen-buck-1cov7l?file=/src/App.js

Remember, you need to calculate the new value based on the current value (prev), when you try to access through input value it can be buggy.

You can read a more profound explanation here: https://twitter.com/dan_abramov/status/816394376817635329

joseglego0
Related