I discovered something weird on the behavior between TextField
and Input
from Material UI
They are very similar to each other, the problem I see is the following:
On the TextField component, if you use InputProps with capital "I"
, the Adorments are shown, but in the other hand if you use it as lowercase "inputProps
", the maxLength
Html attribute is TAKEN as valid
, but not the adorments
I ended up using INPUT
instead of a TextField
so you can use adorments
in
<TextField
variant="outlined"
required
fullWidth
error={errors.email}
id="email"
label={t("signup-page.label-email")}
name="email"
onChange={handleChange}
inputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton aria-label="toggle password visibility">
<EmailIcon />
</IconButton>
</InputAdornment>
),
maxLength: 120,
}}
/>
in the above code the adorment
is ignored, but maxLength
taken used as "inputProps
" camel case
The below code is a working example, as you might see, I embraced it as in the old style within a Form Control
, the input label and the input "outlinedInput
"
<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="firstName">Password</InputLabel>
<OutlinedInput
value={values.firstName}
autoComplete="outlined"
name="firstName"
variant="outlined"
required
fullWidth
error={errors.firstName}
id="firstName"
label={t("signup-page.label-firstname")}
onChange={handleChange}
autoFocus
inputProps={{ maxLength: 32 }}
/>
</FormControl>
Solution. My final recommendation, use an OutlinedInput
instead of a TextField
, so you can put in a separated way Adorments
and also maxLength
Below a working example with FormControl
OutlinedInput
, inputProps
- maxLength
and an end Adorment
Icon
<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<OutlinedInput
value={values.passwordConfirm}
variant="outlined"
required
fullWidth
error={errors.passwordConfirm}
name="passwordConfirm"
label={t("signup-page.label-password-confirm")}
type={values.showPasswordConfirm ? "text" : "password"}
id="password-confirm"
onChange={handleChange}
inputProps= {{maxLength:32}}
endAdornment= {
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword("passwordConfirm")}
onMouseDown={handleMouseDownPassword}
>
{values.showPasswordConfirm ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
}
/>
{errors.passwordConfirm && (
<p className="error"> {errors.passwordConfirm} </p>
)}
</FormControl>