Material-UI Select，单击输入时如何在选择上应用 :focus-within 样式？

我在 div 组件内使用 Select：

<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 components
         </div>

CSS容器

.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%);
}

我需要在单击选择输入时触发选择焦点，以便利用父容器的 :focus-within 样式。现在父级 :focus-within 仅在 onChange 事件中工作（当我选择 MenuItem 时）。如您所见，我尝试过 useRef() 但不起作用...似乎当用户单击选择的输入时，它会阻止所有其他焦点...

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

默认情况下，Select打开弹出窗口（通过Menu组件）其选项内portal。这意味着菜单项不是您的菜单项的后代div在 DOM 中，因此当焦点位于菜单或菜单项上时，:focus-within选择器上的div不匹配。

您可以通过添加来更改此行为MenuProps={{ disablePortal: true }} to the Select.

相关文档：

• https://material-ui.com/api/select/#props
  • 记录了MenuProps prop
• https://material-ui.com/api/modal/#props
  • 记录了disablePortal prop (Menu杠杆Popover这利用了Modal)

这是沙箱的修改版本：

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);