Basically what the title says. I'm trying to use the Select component in my app but both the placeholder="Text" and label={"Text"} props don't display the expected result.
When using placeholder the Select is rendered as "empty", while the label prop looks like is doing something but after clicking on it this is the result:
My package.json shows
"#material-ui/core": "^5.0.0-alpha.27",
"#material-ui/icons": "^5.0.0-alpha.27",
"#material-ui/lab": "^5.0.0-alpha.27",
"#material-ui/system": "^5.0.0-alpha.27",
<Select
label={"Text"}
variant="outlined"
size="small"
fullWidth
>
<MenuItem value={1}>Option 1</MenuItem>
<MenuItem value={2}>Option 2</MenuItem>
</Select>
Material UI doesn't support placeholder for <Select /> directly, cause it's also the label: See: here
Instead you will use <InputLabel>Text</InputLabel>
Something like this:
<FormControl>
<InputLabel>Text</InputLabel>
<Select variant="outlined" size="small" fullWidth>
<MenuItem value={1}>Option 1</MenuItem>
<MenuItem value={2}>Option 2</MenuItem>
</Select>
</FormControl>
Related
I am trying to create multiple select input but had problem with the TextField because it is not accepting multiple props My TextField is shown in the code block.
<TextField
label={crmFieldTitleMap(value, t)}
size="small"
variant="outlined"
select
multiple
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</TextField>;
With TextField I can't select multiple items but label seems pretty nice
Then I found a solution to choose multiple select which I used and as shown in the code block.
<FormControl className="w-full ">
<InputLabel id="multiple_select_thingy">{titleMultiple(value, t)}</InputLabel>
<Select
labelId="multiple_select_thingy"
label={titleMultiple(value, t)}
size="small"
variant="outlined"
multiple
disabled={....}
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</Select>
</FormControl>;
With Select I can select multiple items perfectly but the label seems weird.
Also when there are no items selected input gets weird too
I have the following material-ui Select component:
<FormControl fullWidth className="attr-foreign-key">
<InputLabel id={field+"-label"}>{catalog.title_singular}</InputLabel>
<Select
labelId={field+"-label"}
id={field}
value={value_name}
onChange={this.handleChange(value_id)}
renderValue={value_name => value_name}
>
<MenuItem value="">
<em>Ninguno</em>
</MenuItem>
{
this.state.choices? this.state.choices.map(choice => <MenuItem value={choice.name}>{choice.name}</MenuItem>): null
}
</Select>
</FormControl>
The problem is that it displays the label of the Select over its content:
It only displays well when the Select has the focus:
But it fails again when it looses it. I haven't found any reference for solving this.
Material ui has a props in Textfield component to transform it to use select. Doing so you wont have the problem and it will be easier for you to use for the same result.
link
Code sample:
<TextField
id="filled-select-currency"
select
label="Select"
value={currency}
onChange={handleChange}
helperText="Please select your currency"
variant="filled"
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
Hope it helps.
I'm having a hard time with this select. Looks like there might be a bug with the displayEmpty prop. I've tried the following, but the label always covers the input when the value === ""
<FormControl>
<InputLabel htmlFor="profile-select">Profile</InputLabel>
<Select
value={values.accessProfile}
onChange={handleChange("accessProfile")}
input={<Input id="profile-select" />}
displayEmpty
>
<MenuItem value={""}>None</MenuItem>
{profiles.map(profile => (
<MenuItem value={profile.id}>{profile.name}</MenuItem>
))}
</Select>
</FormControl>
You need to set the shrink property on the InputLabel component to true https://material-ui.com/api/input-label/
I'm trying to use a select, and I'm using the material-ui example
When I use the change() I don't get the value. Any suggestions?
<TextField
select
name={load.loadDetail.loadType}
variant="outlined"
label="Load Type"
value={load.loadDetail.loadType}
margin="normal"
fullWidth
onChange={handleChange}
>
<MenuItem>
<em>Refrigerated</em>
</MenuItem>
<MenuItem>
<em>Dry Product</em>
</MenuItem>
<MenuItem>
<em>Power Only</em>
</MenuItem>
</TextField>
The SelectField component in Material UI v1 is currently work in progress. You can see the current progress
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>
You have the option to use either TextField or Select(as suggested above), the issue with your code is that your MenuItem component has no value property.
e.g.
<MenuItem key="refrigerated" value="Refrigerated">
<em>Refrigerated</em>
</MenuItem>
I am using component from material-ui library for multiple options like age,race etc. but the problem is, selecting one menu item in a changes the value in other component.
<SelectField
floatingLabelText="City"
value={this.state.value}
onChange={this.handleChange}
fullWidth
>
<MenuItem value={22} primaryText="New York" />
<MenuItem value={23} primaryText="London" />
<MenuItem value={24} primaryText="Paris" />
<MenuItem value={25} primaryText="Rome" />
</SelectList>
<SelectField
floatingLabelText="Smoker"
value={this.state.value}
onChange={this.handleChange}
fullWidth
>
<MenuItem value={19} primaryText="No" />
<MenuItem value={20} primaryText="Ex Smoker - Approximate date of
quitting" />
<MenuItem value={21} primaryText="Yes - Approximate consumption per
day" />
</SelectField>
Reason is, you are using a single state variable to save the value for both SelectFields, so if any of the field will change, it will change the other fields also. Instead of one variable, use separate variable for all SelectField.
Define the separate variable for these two SelectFields:
constructor(){
super();
this.state = {city: null, smoker: null}
}
Now use these variables with SelectField instead of same:
<SelectField
floatingLabelText="City"
value={this.state.city} //here
onChange={this.handleChange}
fullWidth={true}
>
<MenuItem value={22} primaryText="New York" />
<MenuItem value={23} primaryText="London" />
<MenuItem value={24} primaryText="Paris" />
<MenuItem value={25} primaryText="Rome" />
</SelectList>
<SelectField
floatingLabelText="Smoker"
value={this.state.smoker} //here
onChange={this.handleChange}
fullWidth={true}
>
<MenuItem value={19} primaryText="No" />
<MenuItem value={20} primaryText="Ex Smoker - Approximate date of quitting" />
<MenuItem value={21} primaryText="Yes - Approximate consumption per day" />
</SelectField>