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}
/>
}
>
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 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>
Is there any way to use the InputProps in <input /> element instead of <TextField /> of Material UI?
My Input.js component where I have used InputProps:
const Input = ({name, handleChange, type, handleShowPassword}) => {
return(
<input
name={name}
onChange={handleChange}
require
type={type}
InputProps={name === 'password' && {
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleShowPassword}>
{type === 'password' ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
)
}
export default Input
SignUp.js:
const SignUp = () => {
return (
<div>
<Input name="firstName" handleChange={handleChange} />
<Input name="password" type={showPassword ? 'text' : 'password'} handleShowPassword={handleShowPassword} />
</div>
)
}
export default SignUp
Please any help would be appreciated or feel free to share if there are any other ways to achieve the result.
My suggestion is you need to use Tailwindcss, and install tailwindcss/forms package.
I just found one tailwind component that are using
<input/>
for that functionality.
Here's the link for that : https://www.hyperui.dev/components/marketing/forms
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"
}
}}
/>