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'}
>
Related
I have the following Control written for ReactJs app. The app and the code is not written by me, but I have to modify it. However, I am new to ReactJs.
function FormSelectNative({ name, label = null, defaultValue = '', options, valueKey = 'value', labelKey = 'label', ...props }) {
return (
<FormControl variant="outlined" size="small" fullWidth>
<InputLabel id={name}>
{label || name}
</InputLabel>
<Select
name={name}
labelId={name}
label={label || name}
defaultValue={defaultValue}
{...props}
>
{options.map(option =>
<MenuItem key={option[valueKey]} value={option[valueKey]}>{option[labelKey]}</MenuItem>
)}
</Select>
</FormControl>
);
}
I need to pass defaultValue parameter correctly.
I am trying to set it like this:
<FormSelectNative
options={games}
valueKey="id"
labelKey="name"
onChange={handleGameSelect}
defaultValue={games[0]}
/>
But it doesn't work (default value is not set). I need to set default value to be first element of "games". However, here I believe is some mismatch of types, so it is not set.
Games element example:
{id: 1, name: "Name of Game", description: "Some test description", helper: "test.png", created_at: "2021-08-24T16:06:13", ... some other properties}
The defaultValue has to be one of the possible value that you pass to the MenuItem. Each of those values is the game.id of each game, not the game object as a whole (a number, not an object). That's because you are doing value={option[valueKey]} where valueKey is id.
Therefore this is what you should do instead to set the default value correctly:
<FormSelectNative
options={games}
valueKey="id"
labelKey="name"
onChange={handleGameSelect}
defaultValue={games[0].id} // <<<--- get the id of the first item
/>
I'm displaying three property values (option.primary_line, option.city, option.state, and option.zip_code) from state in the autocomplete suggestions; however, I'm trying to display only the option.primary_line value in the textarea when an option from the list is selected. I've tried setting the option.primary_line value to state and adding it as a value (tried defaultValue as well) to the textarea to no avail. What am I missing?
<Autocomplete
id="combo-box-demo"
options={addressSuggestions}
getOptionLabel={(option) =>
`${option.primary_line}, ${option.city}, ${option.state} ${option.zip_code}`
}
onInputChange={handleAddressLookup}
freeSolo={true}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
fullWidth
/>
)}
/>
You should use renderOption instead, and in getOptionLabel return the value you want to be assigned to the input
<Autocomplete
...
renderOption={(option) =>
`${option.primary_line}, ${option.city}, ${option.state} ${option.zip_code}`
}
getOptionLabel={(option) => option.primary_line}
...
/>
I use a select tag in my application:
<Select
showSearch={false}
defaultValue={["Lucy"]}
mode="multiple"
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>,
document.getElementById("container")
I want to set a default selected value for this Select, to get something like this:
So, when i will open first time this dropdown, i want to have a default value selected in the way like in the image. I tried defaultValue but it does not work as i described., So, how to achive what i described above?
demo: https://codesandbox.io/s/select-with-search-field-ant-design-demo-4f9op?file=/index.js:410-955
You are providing ['Lucy'] (uppercased) as default value but the values provided in the options are 'lucy', 'jack', and 'tom' all lowercased. That is why the Select treats the default value as another value.
Solution either provide the default value same as used in options defaultValue={["lucy"]} or use uppercased values in Option if you want the defaultValue to be uppercased as well.
<Select
showSearch={false}
defaultValue={["lucy"]}
mode="multiple"
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>,
document.getElementById("container")
Codesandbox demo, codesandbox
The option value is 'lucy', and you set the default value to 'Lucy' (with a capital letter). Therefore, the default value does not work. Set the default value to 'lucy'.
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 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