I am using the Select component from material-ui (v3), but it does not provide the functionality when a user presses a letter on keyboard, like L, it immediately jumps to that letter.
And by pressing Enter key, it selects that option
Anyone has got an idea how I can achieve that?
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: 'age',
id: 'age-simple',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Important: I am using version 3.9 and not 4.x.
https://v3.material-ui.com/demos/selects/#simple-select
Related
I want to change the color of the label when its in its floaty state with sx. Not sure how to do that.
<FormControl fullWidth size='small'>
<InputLabel id="demo-simple-select-label" sx={{'& Mui-focused':{color:'red'}}}>Bloques Aerial</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
onChange={changeSecondSelect}
sx={{backgroundColor:'white',color:'black'}}
>
{selectedBlocks?.map((item, index) => {
return(
<MenuItem key={index} value={item}>{item}</MenuItem>
)
})}
</Select>
</FormControl>
You almost had it. By inspecting the DOM, the correct CSS selector is .MuiInputLabel-shrink. So your InputLabel component would be:
<InputLabel
id="demo-simple-select-label"
sx={{
'&.MuiInputLabel-shrink':{
color:'red'
}
}}
>
Bloques Aerial
</InputLabel>
I want to select an option via playwright, but I cannot select an option. What is wrong?
MUI
<Select
data-testid="color"
>
<MenuItem value="red">
red
</MenuItem>
<MenuItem value="green">
green
</MenuItem>
</Select>
test
await page.selectOption("data-testid=color", "red)
There might be some whitespaces if what you copies is accurate. I'd try to select by value:
await page.selectOption('[data-testid=color]', { value: 'red' });
I am using the Select with the multiple prop. The component works fine, and the InputLabel renders the renders the following:
However, when I add an icon at the beginning via the startAdornment prop, the InputLabel is moved above the input field.
Do you know how to show the label next do the icon when no values are selected?
The code is:
<FormControl className={classes.formControl} fullWidth variant="outlined" size="medium">
<InputLabel name={name} color="secondary" variant="outlined" htmlFor={id} id={id} className={classes.label}>{label}</InputLabel>
<Select
name={name}
labelId={id}
id={id}
multiple
autoWidth
startAdornment={icon}
color="secondary"
value={selectedValues}
onChange={handleChange}
renderValue={selectedOptions => (
<div className={classes.tags}>
{selectedOptions.map(option => (
<Chip key={option.value} label={option.label} size="small" className={classes.chipStyle} />
))}
</div>
)}
>
{options.map(option => (
<MenuItem key={option.value} value={option}>
<Checkbox checked={logicHere} color="primary" />
<ListItemText primary={option.label} />
</MenuItem>
))}
</Select>
</FormControl>
Did you try ?
<Select
InputProps={{
startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
}} />
I'm using material-ui-pickers 2.2.4 Datepicker component.
However, I would like the Date icon to be placed on the left side instead on the right side (default).
any help?
tried custom css, to wrap the component with css, and all these hacky ways failed.
<MuiPickersUtilsProvider utils={MomentUtils}>
<DatePicker
readOnly
ref='datepicker'
labelFunc={this.formatWeekSelectLabel}
// value=""
onChange={this.handleDateChange}
animateYearScrolling
InputProps={{
disableUnderline: true,
}}
/>
</MuiPickersUtilsProvider>
</MuiThemeProvider>```
<DatePicker
readOnly
ref='datepicker'
labelFunc={this.formatWeekSelectLabel}
// value=""
onChange={this.handleDateChange}
animateYearScrolling
InputProps={{
disableUnderline: true,
}}
InputAdornmentProps={{ position: 'start' }}
/>
I am new to Material UI and am trying to use V1. Is there Select Field in V1. I can't find it. Is it replaced by something else?
Thanks
As of material V1.2 :
import Select from '#material-ui/core/Select';
...
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: 'age',
id: 'age-simple',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
The SelectField component in Material UI v1 is currently work in progress.
You can see the current progress here.
I recently ported some projects to Material UI v1 and replaced select fields with radio buttons.
Edit
Since v1.0.0-beta.9 the Selectcomponent is available.
Example usage:
<Select
value={this.state.value}
onChange={(e) => this.setState({ value : event.target.value}) }
input={<Input name="select" id="select-simple" />}
>
<MenuItem value={0}>
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>