React: Safari won't let me type on a text input

[brielov]

I wrote a simple search box that works fine on Chrome and Firefox, but in Safari is another story. It let me type a single character and won't update any more.

Here is the code

function Header({ history }) {
  const [q, setQ] = useState("");

  const onSubmit = e => {
    e.preventDefault();
    history.push({
      pathname: "/buscar",
      search: `q=${encodeURIComponent(q.trim())}`,
    });
  };

  return (
    <header className={styles.Header}>
      <div className={styles.Container}>
        <form className={styles.Form} onSubmit={onSubmit}>
          <input
            autoCapitalize="off"
            autoComplete="off"
            autoCorrect="off"
            autoFocus
            className={styles.Input}
            onChange={e => setQ(e.target.value)}
            placeholder="Buscar por nombre, dni o cuit"
            spellCheck="false"
            type="search"
            value={q}
          />
          <button type="submit" className={styles.Submit}>
            Buscar
          </button>
        </form>
      </div>
    </header>
  );
}

Am I missing something? Is this a known bug?

[gaearon]

A reproducing case please.

[brielov]

@gaearon Sorry, here is a prototype: https://cuit.app

[gaearon]

Can you make a standalone example with inspectable code please? Like CodeSandbox.

[tiendo1011]

I believe this is not an React issue, it's the issue with -webkit-user-select: inherit; (CSS) getting applied to Safari.

[brielov]

@gaearon Yes I can, but it won't be necessary. @TienDo1011 you are right, user-select was the problem. Thank you and sorry for this dummy issue.