label text is striking off MUI outlined input

July 26, 2023

I have an MUI outlined input, when I used it, it is showing me like below:
where "New Password" text is striked off

this is my code, can you anyone help me.

<FormControl fullWidth variant='outlined'>
    <InputLabel htmlFor='new-password'>New Password</InputLabel>
    <OutlinedInput
      id='new-password'
      className='marginBtm15px'
      value={newPassword}
      type={showPassword ? 'text' : 'password'}
      onChange={handleNewPasswordChange}
      endAdornment={
        <InputAdornment position='end'>
          <IconButton onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword}>
            {showPassword ? <p className='showHide'>Hide</p> : <p className='showHide'>Show</p>}
          </IconButton>
        </InputAdornment>
      }
    />
  </FormControl>

>Solution :

Add label props to the Outlined input component, which will prevent text from being cut off.

<FormControl fullWidth variant="outlined">
        <InputLabel htmlFor="new-password">New Password</InputLabel>
        <OutlinedInput
          id="new-password"
          className="marginBtm15px"
          label="New Password"
          onChange={() => {}}
          endAdornment={
            <InputAdornment position="end">
            ...
            </InputAdornment>
          }
        />
</FormControl>

Example