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 am trying to make a select element for cities with material-UI. The problem is that I need to have the same design as the Textfields I have above that element. I used the following
<FormControl variant='outlined' className={classes.city}>
<InputLabel>City</InputLabel>
<Select
label='City'
value={city}
onChange={(event) => setCity(event.target.value)}
>
{cities.map((storeCity, key) => <MenuItem key={key} value={storeCity.id}>{storeCity.name}</MenuItem>)}
</Select>
</FormControl>
Before clicking the element
This gives me the perfect visual output and generally works well. The only problem is that it is slow as the cities array contains more than 200 cities. What should I do to have the same visual effect with faster rendering?
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>
Trying to set up a control for a select field but even with placeholder set it still always auto selects the first item in the list.
It looks like this...
export function renderSelector({input, label, placeholder, meta:{touched, warning, error}, title, mandatory, fieldValues, fieldItemKeyFunc, fieldItemLabelFunc, props}) {
const mappedData = fieldValues.map(v => ({Id: fieldItemKeyFunc(v), Name: fieldItemLabelFunc(v)}));
let custom = props || {};
return (
<FormGroup controlId={input.name} validationState={touched && error ? 'error' : null}>
<Col xs={12}>
{renderLabel(title, label, mandatory)}
</Col>
<Col xs={12}>
<FormControl componentClass="select" placeholder={placeholder} name={input.name} {...input} {...custom}>
{
mappedData.map((item, index) => {
return (
<option key={index} value={item.Id}>{item.Name}</option>
)
})
}
</FormControl>
<FormControl.Feedback/>
{renderErrBlock(touched, warning, error)}
</Col>
</FormGroup>
);
}
When this renders the selector always starts with the first item selected, instead of the placeholder. How can I fix this?? I tried just adding a default first option and adjusting the css, but for Accessibility that doesn't work that well because the contrast levels
A bit late, but check if adding this option helps you:
<option key='blankChoice' hidden value />
Make sure to check the form value to a blank choice as well:
<Form.Control
value=''
>
You can do something like this:
Add a
<option disabled value={-1} key={-1}>
, and set your
<FormControl value={-1} ...
for a similar effect.
Just dropping a late answer, in case someone finds this useful.
React Bootstrap's Form as='select' doesn't seem to allow placeholder out of the box. Adding a blank value to Form.Control would render the input useless. Adding an extra option above mappedData.map(), as follows would work:
<option key = 'blankChoice' hidden value> --Your placeholder text-- </option>