相关疑难解决方法(0)

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