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.
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 working in a React app with Antd and React Hook Form, I want to edit te sent value of my React-Hook-Form, I'm using Controller, This is my code:
<Controller
control={control}
rules={{ required }}
name={field}
render={({ field }) => (
<Select
mode='multiple'
allowClear
{...field}
>
{items.length > 0
? items.map((item) => (
<Option
key={item.id}
value={JSON.stringify(item.id)}
>
{item.label}
</Option>
))
: null}
</Select>
)}
/>
The Value of my Select field is ['1474','7458','4569']
The expected value : '1474;7458;4569'
I Want to have a string with all Ids separated with commas instead of getting an array of the Ids
I did'nt found anythings in the API on Antd, have you any ideas please ?
Thank you!
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 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>
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>