On Page Load, the saved credentials are auto filled and they are overlaping with the placeholder of mui textfield component

How to solve this

I used useEffect for triggering click event on page render , but its not effecting the text field, and i tried autoFocus prop also , its not working too

<TextField
        id={id}
        fullWidth
        autoFocus={autofocus}
        name={name}
        style={customStyles}
        label={label}
        variant={variant}
        type={showPassword ? "text" : type}
        value={value}
        onChange={handleOnChange}
        onBlur={onBlur}
        error={error}
        helperText={helperText}
        placeholder={placeholder} 
        onKeyDown={handleKeyDown}
        slotProps={{
          input: {
            autoComplete: autocomplete,
            ...(type === "password" && {
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    aria-label={
                      showPassword
                        ? "hide the password"
                        : "display the password"
                    }
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                    onMouseUp={handleMouseUpPassword}
                    edge="end"
                  >
                    {showPassword ? (
                      <VisibilityOff titleAccess={t(wordings.hidePassword)} />
                    ) : (
                      <Visibility titleAccess={t(wordings.showPassword)} />
                    )}
                  </IconButton>
                </InputAdornment>
              ),
            }),
          },
        }}

On Page Load, the saved credentials are auto filled and they are overlaping with the placeholder of mui textfield component

How to solve this

I used useEffect for triggering click event on page render , but its not effecting the text field, and i tried autoFocus prop also , its not working too

<TextField
        id={id}
        fullWidth
        autoFocus={autofocus}
        name={name}
        style={customStyles}
        label={label}
        variant={variant}
        type={showPassword ? "text" : type}
        value={value}
        onChange={handleOnChange}
        onBlur={onBlur}
        error={error}
        helperText={helperText}
        placeholder={placeholder} 
        onKeyDown={handleKeyDown}
        slotProps={{
          input: {
            autoComplete: autocomplete,
            ...(type === "password" && {
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    aria-label={
                      showPassword
                        ? "hide the password"
                        : "display the password"
                    }
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                    onMouseUp={handleMouseUpPassword}
                    edge="end"
                  >
                    {showPassword ? (
                      <VisibilityOff titleAccess={t(wordings.hidePassword)} />
                    ) : (
                      <Visibility titleAccess={t(wordings.showPassword)} />
                    )}
                  </IconButton>
                </InputAdornment>
              ),
            }),
          },
        }}

• reactjs
• material-ui
• textfield

1 Answer 1

Read the MUI documentation

To workaround the issue, you can force the "shrink" state of the label.

<TextField slotProps={{ inputLabel: { shrink: true } }} />

or

<InputLabel shrink>Count</InputLabel>