I implemented a function which checks the user keypress to allow only alphabetical characters. This implementation works on iOS and desktop browsers but it’s not working on Android Chrome browser.

Would like to check if anyone has faced similar issue and what was your solution?

These are the function and the corresponding react element that was implemented.

function ValidateKeypress( event )
    {
        //Check for valid keypress
        if  (   "ArrowUp" === event.key
            ||  "ArrowDown" === event.key 
            ||  "ArrowLeft" === event.key 
            ||  "ArrowRight" === event.key 
            ||  "Backspace" === event.key 
            ||  "Delete" === event.key 
            ||  "Tab" === event.key
            ) 
        { 
            //Return for valid keypress
            return 
        } 
        else 
        {   
            //Validate regex 
            !/[A-z|s]/.test( event.key ) && event.preventDefault() 
        }//end if statement
    }

<Form.Control 
name="name_first"
onKeyDown={(event) => ValidateKeypress(event)}
pattern="^[A-zs]{2,}" 
placeholder="Name"
required
type="text"
/>