I'm using the Select inside a div ponent:

<div className="custom-filter custom-filter-data">
            <DateRangeIcon className="search-icon"/>
            <FormControl variant='standard' ref={addrRef} className= 
                {classes.formControl}>                
              <Select
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                defaultValue=""
                onFocus={(e) => {addrRef.current.focus()}}
                displayEmpty
              >
                <MenuItem value="" disabled>
                  Seleziona data
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
            </FormControl>
              //other ponents
         </div>

css container

.custom-filter:focus-within{
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

I need to trigger the focus on the select when the select input is clicked in order to leverage :focus-within styling of the parent container. Now the parent :focus-within is working just onChange event (when I select the MenuItem). as you can see, I've tried with useRef() but is not working... It seems that when a user clicks on the input of the select, it blocks all the other focus...

=/src/index.js

I'm using the Select inside a div ponent:

<div className="custom-filter custom-filter-data">
            <DateRangeIcon className="search-icon"/>
            <FormControl variant='standard' ref={addrRef} className= 
                {classes.formControl}>                
              <Select
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                defaultValue=""
                onFocus={(e) => {addrRef.current.focus()}}
                displayEmpty
              >
                <MenuItem value="" disabled>
                  Seleziona data
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
            </FormControl>
              //other ponents
         </div>

css container

.custom-filter:focus-within{
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

I need to trigger the focus on the select when the select input is clicked in order to leverage :focus-within styling of the parent container. Now the parent :focus-within is working just onChange event (when I select the MenuItem). as you can see, I've tried with useRef() but is not working... It seems that when a user clicks on the input of the select, it blocks all the other focus...

https://codesandbox.io/s/react-material-ui-select-forked-8msbu?file=/src/index.js

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Apr 7, 2021 at 16:13 Ryan Cogswell 81.3k99 gold badges241241 silver badges212212 bronze badges asked Apr 7, 2021 at 1:01 JulyJuly 55822 gold badges88 silver badges2525 bronze badges 10

• Can you put together a runnable example? – Joshua Commented Apr 7, 2021 at 1:07
• 1 Can you clarify your question a bit more. It's hard to understand what you want. If you want to execute some code when the user clicks the SelectInput, attach a focus listener like this: Select onFocus={e => console.log('focus')} /> – NearHuscarl Commented Apr 7, 2021 at 4:18
• 1 Can you put your code on CodeSandbox? – NearHuscarl Commented Apr 7, 2021 at 10:41
• 1 Are you using MUI v1? it's unsupported now and your CodeSandbox doesn't run when I tried to pass the ref to the ponent. – NearHuscarl Commented Apr 7, 2021 at 11:16
• 1 @July You can find many CodeSandbox examples in both the Material-UI documentation and in many StackOverflow questions that use v4 of Material-UI. A CodeSandbox using v1 isn't helpful when that isn't what you are using. – Ryan Cogswell Commented Apr 7, 2021 at 15:03

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 5

By default, Select opens the popup (implemented via the Menu ponent) of its options within a portal. This means that the menu items are not descendants of your div in the DOM, so when focus is on the menu or menu items then the :focus-within selector on your div is not matched.

You can change this behavior by adding MenuProps={{ disablePortal: true }} to the Select.

Relevant documentation:

• https://material-ui./api/select/#props
  • Documents the MenuProps prop
• https://material-ui./api/modal/#props
  • Documents the disablePortal prop (Menu leverages Popover which leverages Modal)

Here's a modified version of your sandbox:

import React from "react";
import ReactDOM from "react-dom";
import Input from "@material-ui/core/Input";
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 "./styles.css";

const App = () => {
  const [value, setValue] = React.useState("");
  return (
    <div className="custom-filter custom-filter-data">
      <FormControl>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          style={{ minWidth: "100px" }}
          value={value}
          input={<Input id="age-simple" />}
          onChange={(event) => setValue(event.target.value)}
          MenuProps={{ disablePortal: true }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty........</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);