TextField input no longer updates state until ENTER is pressed

Extensions
1

Our users are expecting the app’s behavior to match the state of the input as soon as they enter text, even after clicking away from it (e.g. a filter, enter a security code). This used to work.

In the recent version, the behavior has changed so that the state/value of the field of the input is only updated when they press ENTER on the onscreen keyboard. This is far from ideal.

In an example security code checking scenario, the user may have typed, “some-user-code”, and they press the “Check code” button without hitting ENTER and our app button sees an empty string, ““.

TLDR: onChange is not triggered until the ENTER is pressed. Can you please reinstate the old behavior?

const [enteredCode, setEnteredCode] = useState("");
const handleSecurityButtonPress = () => {
  console.log(enteredCode);
}
<TextField
    label="Enter security code"
    required={true}
    value={enteredCode}
    onChange={setEnteredCode}
    error={enteredCodeError}
/>
<Button
    title="Check code"
    onPress={() =>
        handleSecurityButtonPress()
    }
    type="primary"
/>
2

Hi there,

Thanks for your report! You can use the onInput event to achieve the desired behavior: TextField

1 Like
3

Thanks for the quick reply. It seems to have solved the problem.

In the documentation, it says re. onInput: “Don’t use this to update the value property—the onChange callback is the appropriate handler for updating the field’s value.” Is there anything to be aware of, other than maybe performance?

Thanks!