I'm having doubts in material ui dropdown.
This is my doubt.
Initially In material ui dropdown the default value wil be "Select" but while clicking on the dropdown select will not show in the dropdown options. Meaning "Select" is a default value or a placeholder but select is not an option.
How do i achive this?
<FormControl>
<Select
Value={props.value} >
{props.option.map(option => (
<MeuItem key= {option.value} value={option.value}>
{option.label}
<MenuItem>))}
</Select>
Related
I am facing following issue , I am using Nativeselect component in a react app. Using mui version 5. Native select does not trigger first or default option.Objective of below code is that cities option can be selected in that case cityId will be pointing city name. I am facing issue when no cities are there , then we can create a new city in that case first option must be triggered automatically but it does not trigger option <option key="0">New City</option>. Can any one guide me how to set default value in native select to select first option when no cities are available.
<FormControl>
<InputLabel id="city-label">Cities</InputLabel>
<NativeSelect
fullWidth
value={cityId}
onChange={(e) =>
changeHandler(e.target.value)
}
>
<option key="0">New City</option>
{cities.map((x) => (
<option key={x._id} value={x._id}>
{x.city}
</option>
))}
</NativeSelect>
</FormControl>
I'm using Select component from antd Design in my React app with Tag mode, and I want the tags inside that Select to be editable when the user double click on it
Any idea how can I do that?
Here is the code so far:
<Select
showSearch={false}
mode="tags"
onChange={handleChange}
tokenSeparators={[',']}
value={Tags}
>
{children}
</Select>
Check out React Synthetic Event : https://reactjs.org/docs/events.html#mouse-events
<option onDoubleClick={yourFunctionForDoubleClick} value={option.value}>{option.label}</option>
yourFunctionForDoubleClick =(event)=> { your logic here, then setState({yourState: event.target.value})}
I am using select - option for rendering dropdown content .
Code:
<FormControl
className="form-input-field"
error={true}
>
<div>
<select
required
onChange={(event) =>
this.props.handleChange(event)
}
id="Payment"
name="Payment"
>
<option value="">Select</option>
{this.props.DataMap.map((product, key) => (
<option
key={product.tableKey}
value={
[this.props.DataMap.Payment]
.Value
}
>
{product.payment}
</option>
))}
</select>
</div>
</FormControl>
I want validations for the same.
I tried : Putting required field // using renderValue={(value) => ⚠️ - ${value}} // setting error var of FormControl to true // setting validated={true} in Form etc..
With Input content validation & FormHelperText to display error, it works fine.
But is there any way to get the dropdown box highlighted in red colour when error is present...?
I cant use MenuItem as i need the fetch the map content to dynamically render dropdown content.
If anyone has faced/worked on similar issues, pls suggest.
I'm trying to create a select (dropdown) using Material-UI within a redux-form. There's an example for using M-UI's selects within a redux form on their website.
I'd like to do the same type of example except using Material UI's MenuItem's instead of the option tags used in the example.
It seems as though simply replacing the options with MenuItems does not work, and the MenuItems do not appear under the children for the select field. I have gotten this to work with options:
Here is the renderSelectField used to create the select component. This is working:
renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
<FormControl className={this.props.classes.formControl} error={touched && error}>
<InputLabel>{label}</InputLabel>
<Select
native
{...input}
{...custom}
>
{children}
</Select>
{this.renderFormHelper({ touched, error })}
</FormControl>
)
And here is the render:
render() {
return (
<div>
<form onSubmit={this.props.handleSubmit(this.props.submitForm)}>
<Field name={"sheetType"} component={this.renderSelectField} label={"Sheet Type"}>
<MenuItem value={"basic"} primaryText={"Basic"}>Basic</MenuItem>
<MenuItem value={"advanced"} primaryText={"Advanced"}>Advanced</MenuItem>
</Field>
<Button onClick={this.props.onCancel}>Cancel</Button>
<Button type="submit" color={"secondary"}>Next</Button>
</form>
</div>
)
}
I expect there to be two dropdown menu items passed in as the children of MenuItem, but i believe there needs to be some property passed into MenuItem itself.
Replacing menu item with option tags work.
You are mixing between simple Select and native Select. If you going to use native change <MenuItem> to <option> otherwise just remove native property.
Native pattern:
<Select native>
<option value="item">item</option>
</Select>
Simple Select pattern:
<Select>
<MenuItem value="item">item</MenuItem>
</Select>
Could you please tell me how to show select box on focus of input field and close after select item from the drop down?
Here is my code
return (
<div className="App">
<Select
value={selectedOption}
closeMenuOnSelect={false}
menuIsOpen={menuIsOpen}
isMulti={true}
className="select-item"
classNamePrefix="select-item"
onInputChange={() => this.setState({ menuIsOpen: true })}
onChange={this.handleSelectedChange}
options={options}
/>
</div>
);
https://codesandbox.io/s/5v41wrxw9n
using this plugin
https://github.com/JedWatson/react-select
Refer to the link for updated code: https://codesandbox.io/s/mmjvp25z38
I used onFocus to show dropdown
Used on handleSelectedChange method and updated menuIsOpen prop via set state