MUI Select设置native=true时onOpen事件无法触发的问题求助

原因 #

当给 MUI Select 组件设置 native={true} 时，组件会直接渲染为原生 HTML <select> 元素。而原生 <select> 本身并不存在 onOpen 事件——MUI 非原生 Select 的 onOpen 是组件自身封装的自定义事件，仅适用于 MUI 自己实现的下拉逻辑，原生下拉框没有对应的触发机制，因此绑定了也不会生效。官方文档未特别说明这点，是因为 native 模式下组件会完全 fallback 到原生元素的事件体系，只支持原生 <select> 支持的标准事件。

解决办法 #

由于原生 <select> 没有直接对应 onOpen 的事件，我们可以通过监听原生支持的事件来模拟实现需求：

方法一：监听 onFocus 事件 #

原生下拉框被点击展开时，通常会先获得焦点，因此可以用 onFocus 替代 onOpen 触发逻辑：

import { Select } from "@mui/material";
import { useState } from "react";

export default function NativeSelectDemo() {
  const [selected, setSelected] = useState("1");

  const handleChange = (event) => {
    setSelected(event.target.value);
  };

  const handleOpen = () => {
    // 这里放置你原本在 onOpen 中的逻辑
    console.log("下拉框即将打开");
  };

  return (
    <Select
      native
      value={selected}
      onChange={handleChange}
      onFocus={handleOpen}
      style={{ width: 200 }}
    >
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </Select>
  );
}

方法二：结合 onFocus 和 onClick 处理聚焦状态下的重复点击 #

如果下拉框已经处于聚焦状态，再次点击展开不会触发 onFocus，可以通过状态记录聚焦状态，结合 onClick 补充覆盖这种场景：

import { Select } from "@mui/material";
import { useState } from "react";

export default function NativeSelectDemo() {
  const [selected, setSelected] = useState("1");
  const [isFocused, setIsFocused] = useState(false);

  const handleChange = (event) => {
    setSelected(event.target.value);
  };

  const handleOpen = () => {
    console.log("下拉框打开");
    // 执行你的业务逻辑
  };

  return (
    <Select
      native
      value={selected}
      onChange={handleChange}
      onFocus={() => {
        setIsFocused(true);
        handleOpen();
      }}
      onBlur={() => setIsFocused(false)}
      onClick={() => {
        if (isFocused) {
          handleOpen();
        }
      }}
      style={{ width: 200 }}
    >
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
    </Select>
  );
}

注意：原生下拉框的展开/关闭状态无法通过 JavaScript 直接获取，上述方案是基于用户交互行为的模拟，能覆盖绝大多数常规场景。

内容的提问来源于stack exchange，提问作者Kim Vu