reactjsinputmaterial-uifocus

React.js -- input field -- losing focus when typing letters "c" or "n"

So I have an input field inside a MenuItem from MaterialUI, and that MenuItem is inside a Menu. For some strange reason, the input fields lose focus only when typing the letters "c" or "n".

one example

Here is a picture of a Menu with an input field in it. I have noticed that when I type the letter "c", the focus changes from the input field to the first MenuItem, and I am really guessing it is because the inner text starts with the letter "c". (I would upload a gif of what is happening but stackoverflow says the gifs are too much memory to upload)

Since the input loses focus, the letter "c" does not even get typed into the input field. The focus just ends up on the MenuItem that has "Change Username" in it (I know this because it gets highlighted with a light grey color). It is the strangest thing and I cannot figure it out. I've even tried using a normal input tag instead of the Input from material-ui and it does the same thing.

Here is the code for the MenuItem with the input in it.

const changeCredentialsHandleChanges = (e:any) => {
    e.persist();
    const newCredentials = {...credentials, [e.target.name]: e.target.value}
    setCredentials(newCredentials);
    console.log(credentials);
    if(newCredentials.newPassword === newCredentials.confirmNewPassword){
        setChangePasswordButtonDisabled(false);
     } else {
         setChangePasswordButtonDisabled(true);
     }
}
    

<MenuItem disableGutters classes={{root: profileMenuClasses.text2}}>
    <div 
        style={{
            display: 'flex', 
            flexDirection: 'row', 
            alignItems: 'center', 
            borderBottom: '1px solid #F2F2F2', 
            minWidth: '100%', 
            maxHeight: '10px', 
            padding: '10px 0px 20px 15px'
            }}
            >
        <div 
            style={{
                cursor: 'pointer', 
                width: '20%', 
                maxHeight: '10px', 
                transform: 'scale(.7, .7)', 
                display: 'flex', 
                justifyContent: 'center', 
                alignItems: 'center', 
                marginLeft: '-8%'
                }} 
                onClick={changeUsernameHandleClick}
                >
                    <ArrowBackIosIcon fontSize='small' color='action'/>
        </div>
        <p 
            style={{
                width: '80%', 
                maxHeight: '10px', 
                color: '#000000', 
                fontWeight: 'bold', 
                fontSize: '11px', 
                marginBottom: '8%'
                }}
                >
                    Change Username
        </p>
    </div>
</MenuItem>
<MenuItem disableGutters classes={{root: profileMenuClasses.text2}}>
    <div 
        style={{
            display: 'flex', 
            flexDirection: 'column', 
            justifyContent: 'center', 
            borderBottom: '1px solid #F2F2F2', 
            minWidth: '100%', 
            whiteSpace: 'pre-line', 
            maxHeight: '50px'
            }}
            >
        <p 
            style={{
                color: '#000000', 
                width: '100%', 
                fontSize: '11px', 
                fontWeight: 600, 
                maxHeight: '12px', 
                margin: '0 0 0 5%'
                }}
                >
                    Current Username
        </p>
        <p 
            style={{
                color: '#000000', 
                width: '100%', 
                fontSize: '10px', 
                margin: '3% 0 10% 5%', 
                maxHeight: '10px'
                }}
                >
                    {currentUser.username}
        </p>
    </div>
</MenuItem>
<MenuItem disableGutters classes={{root: profileMenuClasses.text2}}>
    <div 
        style={{
            display: 'flex', 
            flexDirection: 'column', 
            justifyContent:'center', 
            minWidth:'100%', 
            whiteSpace:'pre-line'
            }}
            >
        <p 
            style={{
                color: '#888888', 
                fontSize:'11px', 
                margin: '0 0 0 5%', 
                maxHeight: '10px'
                }}
                >
                    New Username
        </p>
        <div 
        style={{
            display: 'flex', 
            justifyContent: 'center', 
            alignItems: 'center'
            }}
            >
            <Input 
                key='newUsernameInput'
                id='newUsername'
                type='text' 
                classes={{input: profileMenuClasses.input}} 
                disableUnderline 
                placeholder='New Username' 
                name='newUsername' 
                value={credentials.newUsername} 
                onChange={changeCredentialsHandleChanges}
                />
        </div>
        <Button 
            style={{
                width: '100px', 
                height: '26px', 
                margin: '7% 0 0 5%', 
                borderRadius: '15px', 
                fontSize: '11px', 
                backgroundColor: '#5540C7', 
                color: '#FFFFFF', 
                fontWeight: 600
                }} 
            onClick={changeUsernameOnSubmit}
            >
                CONFIRM
        </Button>
    </div>
</MenuItem>

There are thousands of lines of code that I did not work on in this program (other than this Menu and a few other Menus(which have the same problem)), so my guess is that there is some block of code in this script that overrides the focus for this input field. Any thoughts, or a work-around perhaps ?

PS every other character can be typed into the input field without a problem, only the letters "c" and "n" have issues.

Solution

  • I had the same issue.

    The easiest solution I found is to add zero-width non-breaking space symbol (&#8288;) in front of the text of MenuItems.

    In my case it looks like this:

    <MenuItem>
  <Typography variant="body1">&#8288;Columns</Typography>
</MenuItem>

    Good:

    Not so good: