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>
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 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
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 want to limit the height of the nested menu in Material-I's Menu to 500px. While I can limit the initial/main menu using "maxHeight" there seems to be no way of styling the submenu (listing the nested MenuItems)
In the paper props
<Menu
id="long-menu"
anchorEl={anchorEl}
open={open}
onClose={this.handleClose}
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
width: 200,
},
}}
>
You can use the nestedListStyle property (MenuItem is basically a wrapper of ListItem, where that property is documented)
<Menu>
<MenuItem primaryText="Menu Item 1" />
<MenuItem primaryText="Menu Item 2" />
<MenuItem
nestedListStyle={{ maxHeight: 100, overflow: 'auto' }}
primaryText="Hello"
nestedItems={[
<MenuItem key={1} primaryText="Child 1" />,
<MenuItem key={2} primaryText="Child 2" />,
<MenuItem key={3} primaryText="Child 3" />,
<MenuItem key={4} primaryText="Child 4" />,
<MenuItem key={5} primaryText="Child 5" />,
<MenuItem key={6} primaryText="Child 6" />,
<MenuItem key={7} primaryText="Child 7" />,
<MenuItem key={8} primaryText="Child 8" />,
]}
/>
</Menu>
menuItem:{
overflowY:'auto',
maxHeight:'100px' //Change it accordingly
}
<div className={classes.menuItem}>
<MenuItem value={'abc'} >abc</MenuItem>
<MenuItem value={'xyz'} dense={true}>xyz</MenuItem>
<MenuItem value={'qwe'} dense={true}>qwe</MenuItem>
<MenuItem value={'iop'} dense={true}>iop</MenuItem>
<MenuItem value={'egx'} dense={true}>egx</MenuItem>
<MenuItem value={'bge'} dense={true}>bge</MenuItem>
</div>