Develop Reference

Select with label that is showing in its full size (Material UI)

I would like to show a select with a label, but the label is cut to the size of the current value of the select box
Is there a way in (2022) to achieve to have a label showing in full size?
My Code with 2 approaches which I do not succeed:
import React from "react";
import { FormControl, InputLabel, MenuItem, Select, TextField } from "#mui/material";
export const TestPage = () => {
const myLabel: string = 'My label with long text'
const arrayValues: string[] = ['0','1','2']
return <><br></br>
<TextField
select
label={myLabel}
>
{arrayValues.map(s => <MenuItem key={s} value={s}>{s}</MenuItem>)}
</TextField>
<FormControl>
<InputLabel id="test-select-label">{myLabel}</InputLabel>
<Select
labelId="test-select-label"
label={myLabel}
>
{arrayValues.map(s => <MenuItem key={s} value="{s}">{s}</MenuItem>)}
</Select>
</FormControl>
</>
};
How it looks:

How do I set autofocus to an input that's inside a select dropdown?

I have an input field inside a select dropdown. I need to focus on that input box as soon as the dropdown is shown when the user clicks on it. I tried using refs, but that doesn't seem to work. I'm using antd 3.26.14 and React 16.8.6. Here is the code:
<Select
labelInValue
open={isOpenSelectCategory}
onDropdownVisibleChange={onDropdownVisibleChange}
placeholder="Select Category"
onChange={() => {
searchDropdownOptions('formCategories', '');
setCategoryInputValue('');
}}
notFoundContent={null}
dropdownRender={menu => (
<>
<div
onMouseDown={lockSelectCategoryClose}
onMouseUp={lockSelectCategoryClose}
style={{ marginBottom: '10px' }}
>
<Input
value={categoryInputValue}
ref={inputRef}
onChange={event => {
searchDropdownOptions(
'formCategories',
event.target.value,
);
setCategoryInputValue(event.target.value);
}}
placeholder="Search category or create new one"
/>
...
The useEffect for the Input ref:
useEffect(() => {
if (inputRef.current) inputRef.current.focus();
}, [inputRef]);
I've tried variations of the above useEffect, where instead of listening to changes on inputRef, I've listened to the change when the dropdown gets loaded. Neither of them worked though.
Any help here will be much appreciated...

Try to use ref={(input) => input && input.focus()} in combination with autofocus property e.g.:
<Input
autofocus
ref={(input) => input && input.focus()}
...
/>
Here is a working stackblitz for a react class component.
NOTE: The issue with this solution is that it focuses input on any re-render (which might not be desired).
See also how-to-set-focus-on-an-input-field-after-rendering for more options.
Code for the linked complete example:
import React, { useFocus } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select, Divider, Input } from 'antd';
import { PlusOutlined } from '#ant-design/icons';
const { Option } = Select;
let index = 0;
class App extends React.Component {
state = {
items: ['jack', 'lucy'],
name: '',
};
onNameChange = (event) => {
this.setState({
name: event.target.value,
});
};
addItem = () => {
console.log('addItem');
const { items, name } = this.state;
this.setState({
items: [...items, name || `New item ${index++}`],
name: '',
});
};
render() {
// const [inputRef, setInputFocus] = useFocus();
const { items, name } = this.state;
return (
<Select
style={{ width: 240 }}
placeholder="custom dropdown render"
dropdownRender={(menu) => (
<div>
{menu}
<Divider style={{ margin: '4px 0' }} />
<div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
<Input
autofocus
ref={(input) => input && input.focus()}
style={{ flex: 'auto' }}
value={name}
onChange={this.onNameChange}
/>
<a
style={{
flex: 'none',
padding: '8px',
display: 'block',
cursor: 'pointer',
}}
onClick={this.addItem}
>
<PlusOutlined /> Add item
</a>
</div>
</div>
)}
>
{items.map((item) => (
<Option key={item}>{item}</Option>
))}
</Select>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));

React Material-UI override popover completely

I currently using a Select component in my app.
I built a custom modal component that I want to launch instead of the list items when the select is clicked. Is there a way to override the handler for clicks on all portions of the component, such as icon, text field, and dropdown arrow to launch my modal? I want to take just the styling of this component essentially and override the onChange and MenuItem stuff.
<Select
value={props.selectedValue}
onChange={props.onTimeChange}
displayEmpty
startAdornment={
<InputAdornment position="start">
<DateRangeIcon />
</InputAdornment>
}
>
{/* DONT USE THESE MENU ITEMS AND USE CUSTOM MODAL INSTEAD */}
{/*<MenuItem value={-1} disabled>*/}
{/* Start Date*/}
{/*</MenuItem>*/}
{/*<MenuItem value={1}>Last Hour</MenuItem>*/}
{/*<MenuItem value={24}>Last Day</MenuItem>*/}
{/*<MenuItem value={24 * 7}>Last Week</MenuItem>*/}
{/*<MenuItem value={24 * 31}>Last Month</MenuItem>*/}
{/*<MenuItem value={''}>All</MenuItem>*/}
</Select>

In order for it to make sense to leverage Select while using an alternative display for the options, it is important that you provide it with menu items for all the allowed values, because the display of the selected item is based on finding a matching MenuItem for the current value (though it would also be possible to provide the Select with a single MenuItem with a dynamic value and text matching whatever the current selected value is).
You can use a "controlled" approach for managing the open state of the Select using the open and onOpen props (you can leave out onClose since the close should always be triggered by your custom display of the options). This way, rather than trying to override the different events that cause the Select to open, you just let it tell you when it should open (via the onOpen prop), but instead of opening the Select, leave its open prop as always false and only open your custom popup.
Here's a working example:
import React from "react";
import InputAdornment from "#material-ui/core/InputAdornment";
import Button from "#material-ui/core/Button";
import DateRangeIcon from "#material-ui/icons/DateRange";
import Popover from "#material-ui/core/Popover";
import Box from "#material-ui/core/Box";
import Select from "#material-ui/core/Select";
import MenuItem from "#material-ui/core/MenuItem";
export default function SimplePopover() {
const [value, setValue] = React.useState(1);
const [open, setOpen] = React.useState(false);
const selectRef = React.useRef();
const handleSelection = newValue => {
setValue(newValue);
setOpen(false);
};
return (
<Box m={2}>
<Select
ref={selectRef}
value={value}
onChange={e => setValue(e.target.value)}
displayEmpty
open={false}
onOpen={() => setOpen(true)}
startAdornment={
<InputAdornment position="start">
<DateRangeIcon />
</InputAdornment>
}
>
<MenuItem value={1}>Last Hour</MenuItem>
<MenuItem value={24}>Last Day</MenuItem>
<MenuItem value={24 * 7}>Last Week</MenuItem>
<MenuItem value={24 * 31}>Last Month</MenuItem>
<MenuItem value={""}>All</MenuItem>
</Select>
<Popover
id="simple-popover"
open={open}
anchorEl={selectRef.current}
onClose={() => handleSelection(value)}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
>
<Button onClick={() => handleSelection(1)}>Last Hour</Button>
<Button onClick={() => handleSelection(24)}>Last Day</Button>
</Popover>
</Box>
);
}
Here's a second example using a single, dynamic MenuItem for the selected value instead of a comprehensive set of menu items:
import React from "react";
import InputAdornment from "#material-ui/core/InputAdornment";
import Button from "#material-ui/core/Button";
import DateRangeIcon from "#material-ui/icons/DateRange";
import Popover from "#material-ui/core/Popover";
import Box from "#material-ui/core/Box";
import Select from "#material-ui/core/Select";
import MenuItem from "#material-ui/core/MenuItem";
export default function SimplePopover() {
const [value, setValue] = React.useState(1);
const [text, setText] = React.useState("Last Hour");
const [open, setOpen] = React.useState(false);
const selectRef = React.useRef();
const handleSelection = (newValue, newText) => {
setValue(newValue);
setText(newText);
setOpen(false);
};
return (
<Box m={2}>
<Select
ref={selectRef}
value={value}
onChange={e => setValue(e.target.value)}
displayEmpty
open={false}
onOpen={() => setOpen(true)}
startAdornment={
<InputAdornment position="start">
<DateRangeIcon />
</InputAdornment>
}
>
<MenuItem value={value}>{text}</MenuItem>
</Select>
<Popover
id="simple-popover"
open={open}
anchorEl={selectRef.current}
onClose={() => handleSelection(value)}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
>
<Button onClick={() => handleSelection(1, "Last Hour")}>
Last Hour
</Button>
<Button onClick={() => handleSelection(24, "Last Day")}>
Last Day
</Button>
</Popover>
</Box>
);
}

Where can be found all MenuProps attributes of a Select in Material UI

Having the next Material UI Select, I've found that one can modify its behavior and appearence.
import React from "react";
import MenuItem from "#material-ui/core/MenuItem";
import Select from "#material-ui/core/Select";
class SimpleSelect extends React.Component {
state = {
age: 10
};
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<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>
);
}
}
export default SimpleSelect;
This is the above one with MenuProps added, also a sandbox where I'm playing with it.
import React from "react";
import MenuItem from "#material-ui/core/MenuItem";
import Select from "#material-ui/core/Select";
class SimpleSelect extends React.Component {
state = {
age: 10
};
handleChange = event => {
this.setState({ [event.target.name]: event.target.value });
};
render() {
return (
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
getContentAnchorEl: null
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
);
}
}
export default SimpleSelect;
My question is: where can I find all the possible attributes (like anchorOrigin, transformOrigin, etc) available for it?
I want to make the dropdown wider and also to add checkboxes for each dropdown item but I don't know what MenuProps attributes to access.

The starting point for finding this is the Select API documentation: https://material-ui.com/api/select/. Within the Props section you will find MenuProps:
MenuProps object Props applied to the Menu element.
In the above, the word "Menu" links to the Menu API documentation. You may look at that and say "but where is anchorOrigin and transformOrigin?"
At the end of the Menu Props API documentation, you will find the following:
Any other props supplied will be provided to the root element (Popover).
In the above, the word "Popover" then links to the Popover API documentation (where you will find anchorOrigin and transformOrigin).
At the end of the Popover Props API documentation, you will find the following:
Any other props supplied will be provided to the root element (Modal).
Similarly, in the above, the word "Modal" links to the Modal API documentation. So the full props available on Menu are the combination of all the props documented for Menu, Popover, and Modal. There is some work in progress to improve the documentation to provide more direct access to all the applicable props: https://github.com/mui-org/material-ui/issues/18288.

Override single css style / tag

I've got a big React app, which is now using Material UI 4.3.0.
I was trying to remove the margin-top style of label + .MuiInput-formControl. (It is a select mui component)
I used the 'overrides' tag in my App.js, as I have before, doing
const theme = createMuiTheme({
overrides: {
MuiInput: {
formControl: {
"label + &": {
marginTop: "0",
}
}
}
},
...
}
And it worked just fine... but it broke every other time I used the same component, as expected.
In my current, working file where I want to change margin, I'm having a hard time overriding the default styles. What is the correct way to override it?
I've tried overriding with classes, unsuccessfully, tried to do const styles = theme => ({ overrides.... etc as i wrote on the createmuitheme above, and tried with inline style.
I know there is a correct way to do it, but i'm not experienced enough to find it. An incorrect, but working way to do it, was to wrap the component in a div and using negative margins on it, but i'm looking to correct it the right way, as it is going to be useful later on too.
Thanks!
Edit: Component that i'm trying to style
renderFormats(){
const { formats } = this.state;
var formatsDOM = undefined;
if(formats !== undefined && this.state.selectedFormat !== undefined){
formatsDOM =
<Select
value={this.state.selectedFormat}
onChange={this.onExportChange.bind(this)}
disabled={!this.state.customFormatIsSelected}
inputProps={{
name: 'Format',
id: 'FormatInput',
}}
>
{formats.map( format => this.renderFormatEntry(format))}
</Select>
}
return formatsDOM;
}

If you are using TextField, then you need to specify the formControl class via InputProps. If you are using the lower-level components (FormControl, InputLabel, and Select) explicitly, then you need a custom Input component (called InputNoMargin in my example) with the formControl class specified and then specify that component using the input property of Select.
Below is an example which applies this styling to a text input TextField, a select TextField, and a "composed" Select using the lower-level components.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
import MenuItem from "#material-ui/core/MenuItem";
import FormControl from "#material-ui/core/FormControl";
import InputLabel from "#material-ui/core/InputLabel";
import Input from "#material-ui/core/Input";
import Select from "#material-ui/core/Select";
const useStyles = makeStyles({
formControl: {
"label + &": {
marginTop: 0
}
}
});
const currencies = [
{
value: "USD",
label: "$"
},
{
value: "EUR",
label: "€"
},
{
value: "BTC",
label: "฿"
},
{
value: "JPY",
label: "¥"
}
];
const InputNoMargin = props => {
const inputClasses = useStyles(props);
return <Input {...props} classes={inputClasses} />;
};
export default function TextFields() {
const inputClasses = useStyles();
const [values, setValues] = React.useState({
name: "Cat in the Hat",
currency: "EUR"
});
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value });
};
return (
<form>
<TextField
id="standard-name"
label="Name"
value={values.name}
InputProps={{ classes: inputClasses }}
onChange={handleChange("name")}
margin="normal"
/>
<br />
<TextField
id="standard-select-currency"
select
label="Select"
value={values.currency}
onChange={handleChange("currency")}
InputProps={{ classes: inputClasses }}
helperText="Please select your currency"
margin="normal"
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<br />
<FormControl>
<InputLabel htmlFor="composed-select">Composed Select</InputLabel>
<Select
value={values.currency}
onChange={handleChange("currency")}
inputProps={{ id: "composed-select", name: "composed-select" }}
input={<InputNoMargin />}
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
</form>
);
}