0

I have a nested component structured as follows:

const Child = ({ onChange, value }) => {
  const [localValue, setLocalValue] = useState("");

  useEffect(() => {
    setLocalValue(value);
  }, [value]);

  return <input onChange={onChange} value={localValue} />;
};

const Parent = () => {
  const [value, setValue] = useState("");

  const handleChange = (e) => setValue(e.target.value);

  return <Child onChange={handleChange} value={value} />;
};

Basically, the child is a controlled input that stores the value in a state before rendering it in the input.

This input works correctly on desktop chrome, as in the typed string is displayed as is in the input. However, when typing using Android GBoard, the string is doubled when the character "@" is inputted. For example, typing "test" doesn't show any problem, but "test@" immediately changes the inputted string into "testtest@", sometimes "test@test@". This only happens after inputting "@", and doesn't occur on other android keyboards.

Can anyone else reproduce this? Any idea why this is happening?

Video of the bug: https://i.stack.imgur.com/8P2FS.jpg

Reproducible codesandbox: https://zd829w.csb.app/

GBoard version: 12.2.05.469624536-release-arm64-v8

Edwin Tandiono
  • 51
  • 2
  • 5
  • I'm not certain what the solution is, but from some tests it seems to be caused by the auto-complete feature, as when you enter an @ (or other symbols for that matter) it automatically "accepts" the suggested word, which gets entered in addition to the text already in the input. It also happens if you simply click on a suggested word. This looks like a similar issue https://github.com/facebook/react-native/issues/26013 - I see suggestions of decoupling the components, or disabling auto-complete. There may well be other solutions too. – Bets Oct 24 '22 at 08:40
  • Unfortunately setting `autocomplete={false}` on the `input` component doesn't solve the problem, and I really prefer not to change my component structure for now, but thanks for the info. – Edwin Tandiono Oct 24 '22 at 09:01

0 Answers0