如何在Material UI的Select输入框中使用onFocus事件？

当给带select属性的TextField直接绑定onFocus/onBlur时，会出现无法获取焦点的问题——这是因为启用select属性后，TextField底层基于Select组件实现，直接绑定在TextField上的焦点事件会被Select的内部逻辑覆盖，导致异常。

正确的做法是把onFocus和onBlur通过InputProps传递给内部的输入元素，修改后的代码如下：

import { TextField, Button } from '@mui/material';

const Form = ({ handleChange, handleFocus, handleBlur, handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      <TextField
        fullWidth
        select
        onChange={handleChange}
        InputProps={{
          onFocus: handleFocus,
          onBlur: handleBlur,
        }}
      />
      <Button variant="contained" type="submit">Submit</Button>
    </form>
  );
};

export default Form;

如果需要监听Select组件本身的焦点状态（比如下拉面板展开前后的焦点变化），可以通过SelectProps绑定事件：

<TextField
  fullWidth
  select
  onChange={handleChange}
  SelectProps={{
    onFocus: (e) => {
      // 这里处理Select组件的焦点逻辑
    },
    onBlur: (e) => {
      // 这里处理Select组件的失焦逻辑
    }
  }}
/>

内容的提问来源于stack exchange，提问作者Md Muaz Ahmed