i got this error while working with mui on react anyone can answer this
i want to create password feild with show and hide functions
<FormControl variant="filled">
<InputLabel htmlFor="conpassword">
confrom password
</InputLabel>
<FilledInput
id="conpassword"
type={passShow ? "text" : "password"}
value={formValues.conpassword}
onChange={handelChange}
onBlur={_onBlur}
error={errors.conpassword ? true : false}
endAdornment={
<InputAdornment position="end">
<IconButton
onClick={(e) => {
e.preventDefault();
setPassShow(!passShow);
}}
edge="end"
>
{passShow ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
<span className="helper">{errors.conpassword}</span>
</FormControl>
Related
Im using functional components and react hook forms with material ui
When resetting a password pressing tab i want to focus the next field instead of the endIcon.
i have tried using useRef but its not working.
Here is my code
<Controller
name="new_password"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
type="password"
label="New Password"
error={!!errors.new_password}
helperText={errors?.new_password?.message}
variant="outlined"
fullWidth
required
onKeyUp={e => {
console.log('key pressed');
if (e.key === 'Tab') {
console.log('tab pressed');
confirmPassword.current.focus();
}
}}
autoComplete="off"
InputProps={{
className: 'pr-2',
type: showPassword ? 'text' : 'password',
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowPassword(!showPassword)}>
<Icon className="text-20" color="action">
{showPassword ? 'visibility' : 'visibility_off'}
</Icon>
</IconButton>
</InputAdornment>
)
}}
/>
)}
/>
<Controller
name="confirm_password"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
type="password"
id="confirm_password"
label="Confirm Password"
error={!!errors.confirm_password}
helperText={errors?.confirm_password?.message}
variant="outlined"
ref={confirmPassword}
fullWidth
required
autoComplete="off"
InputProps={{
className: 'pr-2',
type: showConfirmPassword ? 'text' : 'password',
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
<Icon className="text-20" color="action">
{showConfirmPassword ? 'visibility' : 'visibility_off'}
</Icon>
</IconButton>
</InputAdornment>
)
}}
/>
)}
/>
i did try using ref but its not working. is there a way around to achieve this.
Now my div participants is scroll down of component, and i want to scroll my div participants from right side like this, do you guys has any ideal? Thank you so much, have good day
{detailConversation?.profileIds.length} participants
{open ? <ArrowDropDownIcon /> : <ArrowDropUpIcon />}
</span>
{!!open && (
<div className={clsx(classes.partic)}>
<TextInput
label="Search"
variant="outlined"
size="small"
fullWidth
value=""
InputProps={{
endAdornment: (
<InputAdornment position="end">
<SearchIcon />
</InputAdornment>
),
}}
/>
<span className={classes.member}>
<LinkIcon className={classes.btnIcon} />
<span>Invite via link</span>
</span>
{detailConversation?.profileIds?.map((id: number) => (
<Participants
avatar={profiles[id]?.avatar}
name={profiles[id]?.name}
authorization={profiles[id]?.authorization}
/>
))}
</div>
)}
I am working on a login form with Next Js as frontend and uses MUI 5. The issue is that even after i pass a value to password field, when i click on login button it is showing password field is required. Also when i try to console log the username and password to test it, only username got displayed in the console. please help me to understand what mistake I am doing. Please find the login form below
Please find the code MUI code for both username and password(I am making use of a purchased theme)
<form noValidate autoComplete='off' onSubmit={handleSubmit}>
<FormControl fullWidth sx={{ mb: 4 }}>
<Controller
name='Username'
control={control}
rules={{ required: true }}
render={({ field: { value, onChange, onBlur } }) => (
<TextField
autoFocus
label='Username'
value={value}
onBlur={onBlur}
//onChange={onChange}
onChange={(e)=> setUsername(e.target.value)}
error={Boolean(errors.user)}
// placeholder='admin#materio.com'
/>
)}
/>
{errors.user && <FormHelperText sx={{ color: 'error.main' }}>{errors.user.message}</FormHelperText>}
</FormControl>
<FormControl fullWidth>
<InputLabel htmlFor='auth-login-v2-password' error={Boolean(errors.password)}>
Password
</InputLabel>
<Controller
name='password'
control={control}
rules={{ required: true }}
render={({ field: { value, onBlur } }) => (
<OutlinedInput
value={value}
onBlur={onBlur}
label='Password'
//onChange={onChange}
onChange={(e)=> setPassword(e.target.value)}
id='auth-login-v2-password'
error={Boolean(errors.password)}
type={showPassword ? 'text' : 'password'}
endAdornment={
<InputAdornment position='end'>
<IconButton
edge='end'
onMouseDown={e => e.preventDefault()}
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? <EyeOutline /> : <EyeOffOutline />}
</IconButton>
</InputAdornment>
}
/>
)}
/>
{errors.password && (
<FormHelperText sx={{ color: 'error.main' }} id=''>
{errors.password.message}
</FormHelperText>
)}
</FormControl>
I have a Select component thats needs an icon appended as input adornment , only if it is being passed down from parent.
<Select
className={classes.select}
native
input={<FilledInput
{ ...icon && {
startAdornment={
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
}}}
className={classes.inputContainer}
name={this.props.label}
id={this.props.id} />}
>
It just keeps giving unexpected token error. What is the right way of doing it?
Try:
<Select
className={classes.select}
native
input={
<FilledInput
{...icon ? {
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
)
} : {}}
className={classes.inputContainer}
name={this.props.label}
id={this.props.id}
/>
}
>
I want to create input element which will have select property but also to be able to write custom text in it. I'm using React and Material-UI.
Is it possible to add element inside TextField component (inside div just below input) in Material-UI.
Currently:
Usluga
grupni
Pos
....
With added element:
<div class="MuiFormControl-root-142 ...>
<label class="MuiFormLabel-root-151 ...>Usluga</label>
<div class="MuiInput-root-156 ...>
<input aria-invalid="false" ... list="services" value="">
<datalist id="services">
<li tabindex="-1" ...>grupni<span class="MuiTouchRipple-root-82"></span>
</li>
<li tabindex="-1" ...>Pos<span class="MuiTouchRipple-root-82"></span>
</li>
....
</div>
</div>
React currently:
<TextField
id="service"
label="Usluga"
className={classes.textField}
margin="normal"
onChange={handleChange}
inputProps={{
list: "services"
}}
/>
<datalist id="services">
{
services.map(option => (
<MenuItem key={option.id} value={option.service}>
{ option.service }
</MenuItem>
))
}
</datalist>
If that's not possible, what is the other way to make this?
You can try this method, it worked for me :)
<TextField
required
id='password'
label='Password'
onChange={handleOnChange}
type={toggle.passwordVisibility ? 'text' : 'password'}
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<IconButton
aria-label='toggle password visibility'
onClick={handlePasswordVisibility}
onMouseDown={handleMouseDownPassword}>
{toggle.passwordVisibility && <Visibility />}
{!toggle.passwordVisibility && <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
You can do it this way: InputProps={{ endAdornment: <YourComponent /> }}
https://material-ui.com/api/input/
You can try this method, it worked for me :)
<TextField
variant="outlined"
name="rfc"
size={'small'}
label="RFC"
InputProps={{
endAdornment: (
<datalist id="rfc">
<option value="XAXX010101000"></option>
<option value="XEXX010101000"></option>
</datalist>
),
inputProps: {
list: "rfc"
}
}}
/>