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/
Related
I have a MUI Select which I want to hide the label, but it's not working:
<FormControl fullWidth>
<Select
value={selectedEntry}
onChange={(e) => handleSelectEntry(e.target.value)}
inputProps={{ 'aria-label': 'Without label' }}
>
{dropDownList?.map((entry) => (
<MenuItem key={entry.key} value={entry.key}>{entry.value}</MenuItem>
))}
</Select>
</FormControl>
It display this: output 1
You can set the displayEmpty prop of Select, if true, a value is displayed even if no items are selected.
In order to display a meaningful value, a function can be passed to the renderValue prop which returns the value to be displayed when no items are selected. But you can don't provide any renderValue and no "label" (actually its more like a default displayed value) will be shown.
Empty select:
<Select
value={selectedEntry}
displayEmpty
onChange={(e) => handleSelectEntry(e.target.value)}
>
Select with default displayed value:
<Select
value={selectedEntry}
displayEmpty
onChange={(e) => handleSelectEntry(e.target.value)}
renderValue={value => value || 'there\'s nothing selected'}
>
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>
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 made a multiple select list with Material-UI. But when I select an item the label should shrink and fit into the outline of the input field. The problem is the outline stays the same and the label shrinks behind it.
I tried looking for a solution in the Material-UI docs. It seems like there isn't any multiple select list outlined variant. So I wonder if it is because there is no outlined variant of the multiple select list or that it is due to something else.
<FormControl
variant="outlined"
fullWidth
>
<InputLabel
ref={ref => {
this.InputLabelRef = ref;
}}
htmlFor="members"
error={this.props.touched.members && Boolean(this.props.errors.members)}
>
Members
</InputLabel>
<Select
onChange={this.change.bind(null, "members")}
multiple
value={this.state.members}
error={this.props.touched.members && Boolean(this.props.errors.members)}
input={
<OutlinedInput
labelWidth={0}
name="members"
id="members"
/>
}
>
<MenuItem value={'Baspa'}>Baspa</MenuItem>
<MenuItem value={'Plorky'}>Plorky</MenuItem>
<MenuItem value={'Rizzels'}>Rizzels</MenuItem>
</Select>
I also made a CodeSandBox:
https://codesandbox.io/s/jnlx1vky39
This is how it looks like:
https://imgur.com/a/Wpf7OE0
You were missing a couple pieces that are shown in the documentation that allow the outline to know the label width:
componentDidMount() {
this.setState({
labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth
});
}
...
<OutlinedInput labelWidth={this.state.labelWidth} name="members" id="members" />
Here's the full code:
The original answer is no longer correct. According to this resolved MUI issue, labelWidth is no longer supported. Instead, set the label on the <OutlinedInput> to match the label on the <InputLabel>. Ex:
<InputLabel id="foo">{tag}</InputLabel>
<Select
input={<OutlinedInput label={tag} />}
Full example in the MUI Docs
I have material-ui - select and would like to programmatically focus on this element.
<FormControl
className="select100">
<Select
ref={(formControll) => { this.formControll = formControll; }}
native
value={value}
input={<Input id="integer" />}
>
{possibleOptions.map((item, key) => {
return (<option value={item} key={key}>{item}</option>)
})}
</Select>
I tried with the ref and write this.formControll.focus(); but react is telling me that focus() is not a function. With a button for example the ref is working.
PS: I don't need autoFocus
Thanks
You can pass the Input inside the Select the autoFocus prop and this will apply to the Select.
<Select
native
value={value}
input={<Input id="integer" autoFocus={true} />}
>
{possibleOptions.map((item, key) => {
return (<option value={item} key={key}>{item}</option>)
})}
</Select>
Edit
When i posted the answer i have missed the part that you don't need the autoFocus.
If you are using an input inside your Select then you can use the inputRef prop and this will focus the underline input "attached" to the select.
Code example and Docs.
<Select
ref="selectRef"
native
value={value}
input={<Input id="integer" />}
>
{possibleOptions.map((item, key) => {
return (<option value={item} key={key}>{item}</option>)
})}
</Select>
To access, use
this.refs.selectRef.focus()
Here's a reference github link