I have a TextField in Material UI used as Select. The MenuItems are working fine in the form, but I'm not being able to pre select an option based on data on a state previously populated
I have this , and as example I want to preselect "Familia 3" , What I'm supposed to set up?
<Textfield id="family" select value=0 defaultValue=3 >
<MenuItem value="0">Seleccionar</MenuItem>
<MenuItem value="1">Familia 1</MenuItem>
<MenuItem value="2">Familia 2</MenuItem>
<MenuItem value="3">Familia 3</MenuItem>
</TextField>
I tried changing Value, DefaultValue , removing one of them, and couldt find a solution
AI bet is very simple but I cant find any solution to show up with option "Familia 3" preselected
Can you help me with this?
Thanks !
Default value is not applicable in the select TextField
set your initial value as the value prop.
You have misspelling in the Textfield opening tag it should be TextField
when assigning a non string value to an attribute always use curly brackets ie: value={3}
<TextField id="family" select value={3}>
<MenuItem value="0">Seleccionar</MenuItem>
<MenuItem value="1">Familia 1</MenuItem>
<MenuItem value="2">Familia 2</MenuItem>
<MenuItem value="3">Familia 3</MenuItem>
</TextField>
You can store Familia 3 into the state and than set the value of text field to state
const [initial value, setinitialvalue ] = use state("Familia
3")
<Textfield id="family" select value={initialValue}
onChange={(e) => setinitialvalue(e.target.value) }
defaultValue=3 >
<MenuItem value="Seleccionar
">Seleccionar</MenuItem>
<MenuItem value="Familia 1">Familia 1</MenuItem>
<MenuItem value="Familia 2 ">Familia 2</MenuItem>
<MenuItem value="Familia 3">Familia 3</MenuItem>
</TextField>
Related
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 am creating form using formik and I want age list 1 to 100 in dropdown i am showed but one submit value are not working
codesandox:
https://nmsje.csb.app/
Just change the following code from
<MenuItem key={item} value={item.value}>
{item}
</MenuItem>;
To:
<MenuItem key={item} value={item}>
{item}
</MenuItem>;
Items are just plain numbers not object, so there is no value property in them. I'm not sure why it's not throwing an error though.
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 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>
<DropdownButton bsStyle="default" title="No caret" noCaret id="dropdown-no-caret">
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem eventKey="4">Separated link</MenuItem>
</DropdownButton>
I took this example from the react-bootstrap components examples, https://react-bootstrap.github.io/components.html#btn-dropdowns-nocaret
How would you update the button title when one of the menu item is selected?
Set the title using a state and add an onChange event to you DropdownButton to update the state
<DropdownButton bsStyle="default" title={this.state.btnTitle} noCaret id="dropdown-no-caret" onChange={this.handleChange}>
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem eventKey="4">Separated link</MenuItem>
</DropdownButton>
Function:
handleChange = () => {
var val = 'someValue';
this.setState({btnTitle: val});
}
This will change the title when you select any MenuItem. I hope this solution helps you