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

Question

我在 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

Answer 1

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

您可以通过将MenuProps={{ disablePortal: true }} 添加到Select 来更改此行为。

相关文档：

• https://material-ui.com/api/select/#props
  • 记录MenuProps 属性
• https://material-ui.com/api/modal/#props
  • 记录disablePortal 属性（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);