I've got the following code where I try to capitalize the values shown as labels inside MenuItem but does not apply the text transformation. Any ideas?
const values = ['some value', 'some value 2'];
<TextField
id="status"
name="status"
select
label="Status"
onChange={this.handleSearch}
value={filter.status}
className={classes.textField}
>
{campaignStatus.map(status => (
<MenuItem key={status} value={status} style={{ textTransform: "capitalize" }}>
{status}
</MenuItem>
))}
</TextField>
this is because material ui has their own system of overriding styles, you have to use this syntax
import { makeStyles } from "#material-ui/core/styles";
const Function = props => {
const useStyles = makeStyles(theme => ({
center: {
textTransform: "capitalize"
}
}));
const classes = useStyles();
const values = ["some value", "some value 2"];
return (
<TextField
id="status"
name="status"
select
label="Status"
onChange={this.handleSearch}
value={filter.status}
className={classes.textField}
>
{campaignStatus.map(status => (
<MenuItem key={status} value={status} className={classes.center}>
{status}
</MenuItem>
))}
</TextField>
);
};
Related
I have a component in my react s application where i use ClickAwayListener from #mui/material/ClickAwayListener.
export default function MultipleSelectChip() {
const theme = useTheme();
const [personName, setPersonName] = React.useState([]);
const handleChange = (event) => {
const {
target: { value }
} = event;
setPersonName(
// On autofill we get a the stringified value.
typeof value === "string" ? value.split(",") : value
);
};
return (
<div>
{[1, 2, 3].map(() => {
return (
<div>
<ClickAwayListener onClickAway={() => console.log("click outside")}>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
<Select
labelId="demo-multiple-chip-label"
id="demo-multiple-chip"
multiple
value={personName}
onChange={handleChange}
input={
<OutlinedInput id="select-multiple-chip" label="Chip" />
}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</ClickAwayListener>
</div>
);
})}
</div>
);
}
I expect to trigger onClickAway function only when i click outside a dropdown. But when i click the dropdown plus when i select an option the function also is triggered and i don't understand why. Hw to get the expected behaviour when click outside one of the dropdown? NOTE: the functionality works if i don't use map(), meaning without many dropdowns. demo: https://codesandbox.io/s/multipleselectchip-material-demo-forked-n03vq?file=/demo.js:1080-2905
I need to put all the values and input field for multi autocomplete on one line. But the input field sliding down.
My code:
const { filter, classes, options } = this.props;
const style = filter && filter.value !== '' ? {backgroundColor: 'lavender'} : {};
return (
<TableFilterRow.Cell { ...this.props } className={ classes.cell } style={ style }>
<Autocomplete
options={options}
value={options.filter(option => filter.includes(option.value)) || []}
getOptionLabel={option => option.label}
multiple={true}
fullWidth
disableClearable={true}
onChange={this.handleFilter}
renderOption={option => (
<React.Fragment>
<Checkbox
color="primary"
checked={filter.includes(option.value) || false}
/>
{option.label}
</React.Fragment>
)}
renderTags={values => values.map(option => option.label).join(', ')}
renderInput={(params) => (
<TextField
{...params}
fullWidth
margin="dense"
/>
)}
/>
</TableFilterRow.Cell>
Result:
How can I put all the values and input field for multi autocomplete on one line?
Use style hook API to select input and apply flexWrap and overflow CSS properties:
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"& > .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root": {
flexWrap: "nowrap",
overflowX: "scroll" // or "hidden"
}
}
}));
then, on component use on className:
...
const classes = useStyles();
return (
<div className={classes.root}>
<Autocomplete
...
See this working on codesandbox here.
I am working on a react page using material-ui. I am retrieving data
from the database to populate my select control.
I want to be able to have a default value like "Select the value". The section highlighted in yellow is just blank.
How can I achieve this? An image of what exist is attached.
<FormControl id="ron" className="form-control">
<InputLabel htmlFor="productDescription" shrink>Product Code/Description</InputLabel>
<Select
value={this.state.productCode}
onChange={this.handleChangeProductCode}
name='productcode'
>
<MenuItem value="">
select the value
</MenuItem>
{this.dataForProductCodeControl()}
</Select>
</FormControl>
dataForProductCodeControl() {
if(this.props.groupedData != undefined){
return this.props.groupedData.map((dt, i) => {
return (
<MenuItem key={i} value={dt.productCode}>
{dt.productCode} | {dt.productDescription}
</MenuItem>
);
});
}
}
You need to specify the displayEmpty prop on the Select.
Here's a working example:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import InputLabel from "#material-ui/core/InputLabel";
import MenuItem from "#material-ui/core/MenuItem";
import FormControl from "#material-ui/core/FormControl";
import Select from "#material-ui/core/Select";
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
export default function SimpleSelect() {
const classes = useStyles();
const [values, setValues] = React.useState({
age: ""
});
function handleChange(event) {
setValues(oldValues => ({
...oldValues,
[event.target.name]: event.target.value
}));
}
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple" shrink>
Age
</InputLabel>
<Select
value={values.age}
displayEmpty
onChange={handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
>
<MenuItem value={""}>Select Age</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
You can add a disabled valueless item like this:
<MenuItem value="" disabled>
Placeholder
</MenuItem>
But the item will be displayed as an option. See https://material-ui.com/components/selects/#simple-select
If I use a TextField component, and set InputLabelProps={{shrink: true}}, the Label stays at the top of the TextField, and the outline is cut to show the Label correctly.
However, if I use Select component, as follows :
<FormControl variant={ this.props.variant } className={ classes.formControl } fullWidth>
<InputLabel
ref={ (input) =>{ this.inputLabel = input }}
htmlFor={ this.props.id }
shrink={ true }>
{ this.props.label }
</InputLabel>
<Select
id={ this.props.id }
value={ this.props.value }
onChange={ this.onChange }
input={
<OutlinedInput
labelWidth={ this.state.labelWidth }
name={ this.props.id }
id={ this.props.id }
/>
}
>
{ this.props.options.map(option => (
<MenuItem key={ option.value } value={ option.value }>
<em>{ option.label }</em>
</MenuItem>
))}
</Select>
</FormControl>
The Label stays at the top of the outline just like TextField, however, the outline is not cut out to display the Label nicely, instead it looks like it is "crossed out"
What am I doing wrong?
(Please not, that the this.state.labelWidth has a correct value, even if I hard code this, it still does not work)
Thanks in advance for your help
Cheers
Jason
The default behavior is for the shrink property of InputLabel to be automatically managed by Material-UI. Generally shrink is only applied when the Select has a non-empty value or when it has focus. If you want to have shrink applied all the time, then you also need to specify notched on OutlinedInput since that is what controls leaving a space for the label along the outline.
The code below shows both cases (1. always apply shrink and notched, 2. let Material-UI manage shrink and notched):
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import InputLabel from "#material-ui/core/InputLabel";
import MenuItem from "#material-ui/core/MenuItem";
import FormControl from "#material-ui/core/FormControl";
import Select from "#material-ui/core/Select";
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
function SimpleSelect() {
const classes = useStyles();
const [values, setValues] = React.useState({
age: ""
});
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
function handleChange(event) {
setValues(oldValues => ({
...oldValues,
[event.target.name]: event.target.value
}));
}
return (
<form className={classes.root} autoComplete="off">
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel
shrink
ref={inputLabel}
htmlFor="outlined-age-always-notched"
>
Age
</InputLabel>
<Select
value={values.age}
onChange={handleChange}
input={
<OutlinedInput
notched
labelWidth={labelWidth}
name="age"
id="outlined-age-always-notched"
/>
}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
Age
</InputLabel>
<Select
value={values.age}
onChange={handleChange}
input={
<OutlinedInput
labelWidth={labelWidth}
name="age"
id="outlined-age-simple"
/>
}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
export default SimpleSelect;
Last answer has a deprecated prop labelWidth
For the newer MUI just add shrink prop to InputLabel component and notched prop to Select component.
More on the issue and solution here. https://github.com/mui/material-ui/issues/22799
I am using Material UI for my react project and using the select dropdown that has been shown in the Material UI documentation. On clicking the first set of select drop down a Material UI paper pops up with options overlapping the select element itself. How can I bring the pop up a little below the select element so that it doesn't overlap using custom theme?
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import OutlinedInput from '#material-ui/core/OutlinedInput';
import InputLabel from '#material-ui/core/InputLabel';
import MenuItem from '#material-ui/core/MenuItem';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
},
});
class SimpleSelect extends React.Component {
state = {
age: '',
labelWidth: 0,
};
componentDidMount() {
this.setState({
labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth,
});
}
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
const { classes } = this.props;
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: 'age',
id: 'age-simple',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel
ref={ref => {
this.InputLabelRef = ref;
}}
htmlFor="outlined-age-simple"
>
Age
</InputLabel>
<Select
value={this.state.age}
onChange={this.handleChange}
input={
<OutlinedInput
labelWidth={this.state.labelWidth}
name="age"
id="outlined-age-simple"
/>
}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
}
SimpleSelect.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleSelect);
There's a property called MenuProps for Select. Set variant to menu within MenuProps and adjust CSS as per your requirement.
<Select
classes={{
root: classes.root,
}}
MenuProps={{ classes: { paper: classes.dropdownStyle },
variant: 'menu'
//setting variant to menu makes it appear below the element
}}
onChange={()=>{}}
{...rest}
>
{list.map(item => (
<MenuItem value={item.value}>
<Typography variant="body2" color="textSecondary">
{item.label}
</Typography>
</MenuItem>
))}
</Select>
You can get this look via the anchorOrigin and getContentAnchorEl Menu props which Menu inherits from Popover.
Here is a working example of customizing a single Select:
import React from "react";
import InputLabel from "#material-ui/core/InputLabel";
import MenuItem from "#material-ui/core/MenuItem";
import FormControl from "#material-ui/core/FormControl";
import Select from "#material-ui/core/Select";
export default function SimpleSelect() {
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
const menuProps = {
getContentAnchorEl: null,
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
}
};
return (
<div>
<FormControl style={{ margin: "8px", minWidth: "120px" }}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
MenuProps={menuProps}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}
Here is example of doing the same thing via the theme:
import React from "react";
import InputLabel from "#material-ui/core/InputLabel";
import MenuItem from "#material-ui/core/MenuItem";
import FormControl from "#material-ui/core/FormControl";
import Select from "#material-ui/core/Select";
import { ThemeProvider, createMuiTheme } from "#material-ui/core/styles";
const menuProps = {
getContentAnchorEl: null,
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
}
};
const theme = createMuiTheme({
props: {
MuiSelect: {
MenuProps: menuProps
}
}
});
export default function SimpleSelect() {
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<ThemeProvider theme={theme}>
<div>
<FormControl style={{ margin: "8px", minWidth: "120px" }}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
</ThemeProvider>
);
}
Related answer: How to make a drop-down menu appear exactly below the bar in Material-UI?