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>
Related
I'm trying to create a select using React.Form from React-Bootstrap. I expected something like this(this ss is from react-bootstrap-multiselect):
But I got this kind of result:
This is my code:
<Form.Control
required
as="select"
type="select"
id="instructors"
value={instructors}
onChange={handleChange}
multiple
>
<option hidden value key="blankChoice">
Pilih Instruktur...
</option>
{items
? items.map((item, index) => {
return <option value={item.id}>test{index}</option>;
})
: null}
</Form.Control>
Actually I can just use React-Select library, but I try not using too many libraries, and since I already use React-Bootstrap, it will be take another effort to match the style with another library that I will use.
Thanks!
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'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>
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 am using react-select and TextField Material-UI.
Is there possibility to set helperText (small text below component) in react-select like it is made in TextField?
Thank You for help in advance.
P.S. I do not think my question is duplication of this question. The other post is about how to custom component which is a part of react-select, I want to add an option that react-select doesnt have.
TextField is mainly a convenience wrapper around several lower-level components including FormHelperText.
Here is the Autocomplete demo in the Material-UI documentation using react-select: https://material-ui.com/demos/autocomplete/#react-select
Here is a modified version of that demo using FormHelperText: https://codesandbox.io/s/rynvn8po5p
Here's the relevant snippet from that code:
<Select
classes={classes}
styles={selectStyles}
options={suggestions}
components={components}
value={this.state.single}
onChange={this.handleChange("single")}
placeholder="Search a country (start with a)"
isClearable
/>
<FormHelperText>Here's my helper text</FormHelperText>
The Material-UI demos for Select also show many examples of using FormHelperText without using TextField: https://material-ui.com/demos/selects/#simple-select
Here is the API documentation for FormHelperText: https://material-ui.com/api/form-helper-text/
Do you mean placeholder?
I think You can set this way:
const MyComponent = () => (
<Select placeholder="Select..." options={options} />
)
But if you want the same look why do you use controls from different libraries. I think you can use FormHelperText with Select from Material-Ui. So you might as well this select instead of react-select.
<FormControl className={classes.formControl}>
<InputLabel shrink htmlFor="age-native-label-placeholder">
Age
</InputLabel>
<NativeSelect
value={this.state.age}
onChange={this.handleChange('age')}
input={<Input name="age" id="age-native-label-placeholder" />}
>
<option value="">None</option>
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</NativeSelect>
<FormHelperText>Label + placeholder</FormHelperText>
</FormControl>