There is a component InputEmail, according to the idea it accepts only the Latin alphabet and the symbols "@", "-", "_", "."
But there is such a bug: enter any character, then "@" and after that you can enter the Cyrillic alphabet. In the code below, there is such a bug, try it.
After Cyrillic accepts and Latin, mixed. If you enter any of these characters "@", "-", " ", ".", Then the Cyrillic alphabet is filtered, only the necessary characters remain. But, after these characters, you can again enter the Cyrillic alphabet, it is important that there is any character between "@", "-", " ", ".", Then again you can enter the Cyrillic alphabet, and again a new character "@", "-", "_", "." will filter to the desired value and so on.
What could be the problem and how to overcome it?
const InputEmail = () => { // Сложный пример, показывающий, что дело не в регулярном выражении const onChange = e => { e.currentTarget.value = [...e.currentTarget.value].filter(symbol => { let charCode = symbol.charCodeAt(); return ( // 0-9 (charCode >= 48 && charCode <= 57) || // - (charCode === 45) || // _ (charCode === 95) || // . (charCode === 46) || // @ AZ (charCode >= 64 && charCode <= 90) || // az (charCode >= 97 && charCode <= 122) ) }).join(''); }; // Простой пример на регулярных выражениях // const onChange = e => e.currentTarget.value = e.currentTarget.value.match(/[a-zA-Z0-9@_.\-]*/g).join(''); return ( <div className="Input"> <input type="email" placeholder="Электронная почта" onChange={onChange} /> <label /> </div> ) }; ReactDOM.render( <InputEmail />, document.getElementById('root') ) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 
/[a-zA-Z0-9@_.\-]*/g, after@you can enter any character. This is not a bug, but an incorrectly composed regular expression - Dmytryk