Bug: manipulating controlled input value breaks native validation about react

[felipe-rodolfo]

In the example you provided, you are using React to create a text input component that converts the entered text to uppercase. However, you have noticed that this can interfere with the native HTML validation, especially when the input does not meet validation requirements, as in the case of "a". This happens because the actual value of the input is not altered; only the value displayed in the user interface is changed.

To work around this issue, you can use the onInput event instead of the onChange event. The onInput event is triggered whenever the value of the input field is modified, whereas the onChange event may be triggered after the input field loses focus, which is not ideal for real-time validation.

[HugeLetters]

@felipe-rodolfo React's onChange handler is actually an onInput handler, React doesn't have have an actual onChange handler. So they behave the same way.

Also if onChange handler would have worked like you described - my playground would work correctly since handler wouldn't fire while I'm typing stuff into the input until I unfocus/press enter etc. That's not what happens for the reasons described above.

[felipe-rodolfo]

You are correct, and I apologize for any confusion. React's documentation does indicate that onInput fires immediately when the value is changed by the user, and it is considered idiomatic in React to use onChange instead, as it works similarly.

In most cases, using onChange in a controlled component is the appropriate choice, and it should behave as expected for real-time input handling. The issue you were experiencing with the validation may be specific to how transformations were applied in your onChange handler.

To address the validation issue you initially described, you may need to adjust how you handle transformations in the onChange handler or consider other approaches. Using onChange itself is not the problem; it's about making sure your transformations and validation logic are compatible with the controlled component's behavior.

to solve the validation issue when converting text to uppercase while still using the onChange event, you can follow this approach:

Keep using the onChange event to update the component state and convert the text to uppercase.

Add a custom validation function that checks if the value meets the requirements, such as the minimum length, within the onChange event.

Use setCustomValidity to set up custom validation based on the established rules.

Here's a modified code example:

import React from 'react';`

export function App(props) {
  const [text, setText] = React.useState('');

  const handleInputChange = (e) => {
    const inputText = e.target.value.toUpperCase();
    setText(inputText);

    // Custom validation function
    const isValid = inputText.length === 6;

    if (isValid) {
      e.target.setCustomValidity('');
    } else {
      e.target.setCustomValidity('The text must have 6 characters.');
    }
  };

  return (
    <div className="App">
      <input
        value={text}
        onChange={handleInputChange}
        minLength={6}
        maxLength={6}
        required
      />
      <div>{text}</div>
    </div>
  );
} 

[HugeLetters]

Could you please not clutter the issue with chatGPT responses?