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>
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})}
When using the Native Select from Material-UI if you use the dark theme then the select dropdown has white text on a white background.
This is seen on the component demo page too when in dark mode:
Can you change the dropdown background color without changing the actual select background color?
Edit: This has been logged as an issue: https://github.com/mui-org/material-ui/issues/14337
UPDATE As of version 3.9.2, this issue has been fixed in Material-UI so the workaround below is no longer necessary.
This should probably be fixed in Material-UI, but you can fix it in a particular use case with the following:
Use the theme to specify the option background color (see How to change select box option background color?):
const styles = theme => ({
select: {
"& option": {
background: theme.palette.background.paper
}
}
});
And then use that class on the select:
<Select native className={classes.select}>
Here's a modified version of the demo using this:
It obviously something that should fixed in the package.
However, I found out that it happends only when using native <option> tag. This code if from the problematic demo of theirs:
<Select
native
value={this.state.age}
onChange={this.handleChange('age')}
inputProps={{
name: 'age',
id: 'age-native-simple',
}}
>
<option value="" />
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</Select>
So you have two options:
You can style the option with css and ovveride the background or the fontcolor to anything you want.
You can use another component in material-ui that works well with inverted situations, which they used in another demo. (Using MenuItem), like this:
<Select
multiple
value={this.state.name}
onChange={this.handleChange}
input={<Input id="select-multiple-checkbox" />}
renderValue={selected => selected.join(', ')}
MenuProps={MenuProps}
>
{names.map(name => (
<MenuItem key={name} value={name}>
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
Watch full example here. (Taken from material-ui demo page)
I made a multiple select list with Material-UI. But when I select an item the label should shrink and fit into the outline of the input field. The problem is the outline stays the same and the label shrinks behind it.
I tried looking for a solution in the Material-UI docs. It seems like there isn't any multiple select list outlined variant. So I wonder if it is because there is no outlined variant of the multiple select list or that it is due to something else.
<FormControl
variant="outlined"
fullWidth
>
<InputLabel
ref={ref => {
this.InputLabelRef = ref;
}}
htmlFor="members"
error={this.props.touched.members && Boolean(this.props.errors.members)}
>
Members
</InputLabel>
<Select
onChange={this.change.bind(null, "members")}
multiple
value={this.state.members}
error={this.props.touched.members && Boolean(this.props.errors.members)}
input={
<OutlinedInput
labelWidth={0}
name="members"
id="members"
/>
}
>
<MenuItem value={'Baspa'}>Baspa</MenuItem>
<MenuItem value={'Plorky'}>Plorky</MenuItem>
<MenuItem value={'Rizzels'}>Rizzels</MenuItem>
</Select>
I also made a CodeSandBox:
https://codesandbox.io/s/jnlx1vky39
This is how it looks like:
https://imgur.com/a/Wpf7OE0
You were missing a couple pieces that are shown in the documentation that allow the outline to know the label width:
componentDidMount() {
this.setState({
labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth
});
}
...
<OutlinedInput labelWidth={this.state.labelWidth} name="members" id="members" />
Here's the full code:
The original answer is no longer correct. According to this resolved MUI issue, labelWidth is no longer supported. Instead, set the label on the <OutlinedInput> to match the label on the <InputLabel>. Ex:
<InputLabel id="foo">{tag}</InputLabel>
<Select
input={<OutlinedInput label={tag} />}
Full example in the MUI Docs
I have the following JSX:
<FormControl>
<InputLabel>My label</InputLabel>
<Select>
...
</Select>
</FormControl>
I use the classes prop to style various aspects of the FormControl and Select. The trouble is that the Select component implicitly wraps itself with an Input component, and thus in reality looks something like this:
<FormControl>
<InputLabel>My label</InputLabel>
<Input>
<Select>
...
</Select>
</Input>
</FormControl>
That's where I'm having problems: how can I style the Input that is wrapping the Select? I've looked at the CSS APIs for both Select and FormControl, and neither of them allow you to style that Input.
I know I can add a className to the FormControl and then style it using an external stylesheet, but I want to style it on the component level.
Any ideas?
EDIT:
A snippet of my code (with dummy content), for illustration (was requested):
<FormControl
classes={myClasses.formControl}
>
<InputLabel
htmlFor='country'
classes={myClasses.inputLabel}
>
Select country
</InputLabel>
<Select
value={countryCode}
onChange={onInputChange}
inputProps={{
name: 'countryCode',
id: 'country',
}}
classes={myClasses.select}
>
<MenuItem value='US'>United States</MenuItem>
<MenuItem value='GB'>United Kingdom</MenuItem>
<MenuItem value='FR'>France</MenuItem>
</Select>
</FormControl>
You can do it via standard css import (look at generate code and retrieve the css path) or you can style it using a wrapper and styling it with styled-components. A snippet with a real case would be useful for me to be more specific.
Okay, I've found the solution.
To style the wrapping Input component, you need to explicitly define it in the Select's input prop, and then pass the classes prop to that Input.
Here is an example:
<Select
input={
<Input
classes={myClasses.input}
/>
}
>
...
</Select>