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.
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
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>
thanks for being here! My question is related to how I can create an 'onChange' property in the Material UI Menu component. When I am using the 'onChange' property of the Select component, I can easily alter my state after the user clicks on it. I would like to create a similar effect, but then using a Menu instead of a Select component. Note that I am using a function inside a hook, which might complicate things.
Below I could show you how an example of how my code looks:
const [sortingMethod, setSortingMethod] = useState(() => sortHighestSummerTemp);
const onSortMethod = (e) => {
setSortingMethod(e.target.value);
};
<FormControl>
<InputLabel shrink>Sort By </InputLabel>{' '}
<Select defaultValue="" onChange={onSortMethod}>
<MenuItem value={() => sortHighestSummerTemp}>☀️ Hottest summers</MenuItem>
<MenuItem value={() => sortLowestWinterTemp}>🥶 Coldest winters</MenuItem>
<MenuItem value={() => sortMostHotDays}>🥵 Most hot days</MenuItem>
</Select>
</FormControl>;
That's my select component in action, which is working. And here is the same Menu, where I don't know how to implement the "onChange":
<FormControl className={classes.formControl}>
<PopupState variant="popover" popupId="demo-popup-menu">
{(popupState) => (
<React.Fragment>
<Button
variant="contained"
color="primary"
startIcon={<SortIcon />}
{...bindTrigger(popupState)}
>
Sort by
</Button>
<Menu
value=""
// onChange={onSortMethod} <-- How to do this? ⚠
{...bindMenu(popupState)}
>
<MenuItem
onClick={popupState.close}
value={() => sortHighestSummerTemp}
>
☀️ Hottest summers
</MenuItem>
<MenuItem
onClick={popupState.close}
value={() => sortLowestWinterTemp}
>
🥶 Coldest winters
</MenuItem>
<MenuItem onClick={popupState.close} value={() => sortMostHotDays}>
🥵 Most hot days
</MenuItem>
</Menu>
</React.Fragment>
)}
</PopupState>
</FormControl>;
I would be blessed if you could explain how to achieve a similar effect with the Menu component!
Thank you for reading.
I think you should do that per MenuItem (at the onClick property). The Menu itself doesn't have that kind of property: Material-UI page
Secondly, I don't like value as a function. I think you can just pass the variable (sortHighestSummerTemp or sortLowestWinterTemp) to a state. React page reference
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>