Material-UI：选择Select/MenuItem后Tooltip仍显示的问题

问题描述 #

我正在使用Material-UI的Select组件，并在其外层包裹Tooltip，代码如下：

<Tooltip title="Tooltip Test">
  <Select
    value={this.state.age}
    onChange={this.handleChange}
    inputProps={{ name: "age", id: "age-simple" }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>...</MenuItem>
  </Select>
</Tooltip>

我的问题是：点击Select组件并选择MenuItem后，Tooltip会持续显示，无法正常隐藏。

问题原因 #

这是因为Tooltip的触发逻辑和Select下拉菜单的交互产生了冲突：当你点击Select展开菜单时，Tooltip会通过悬停/点击事件触发显示；但当你选择MenuItem后，Tooltip没有收到“关闭”的触发信号——毕竟你的操作焦点还和Select组件关联在一起，Tooltip误以为你还需要它显示。

修复方案 #

方案一：手动控制Tooltip显隐（适合保留悬停触发的场景）

我们可以通过同步Tooltip的显示状态和Select的展开/关闭事件来解决：

1. 先在组件的state里添加一个控制Tooltip显示的变量：

state = {
  age: "",
  tooltipOpen: false
};

2. 给Tooltip绑定open属性到这个状态，同时添加打开/关闭的事件处理：

<Tooltip
  title="Tooltip Test"
  open={this.state.tooltipOpen}
  onOpen={() => this.setState({ tooltipOpen: true })}
  onClose={() => this.setState({ tooltipOpen: false })}
>

3. 最后给Select添加onOpen和onClose事件，来控制Tooltip的状态：

<Select
  value={this.state.age}
  onChange={this.handleChange}
  inputProps={{ name: "age", id: "age-simple" }}
  // 打开Select下拉时关闭Tooltip
  onOpen={() => this.setState({ tooltipOpen: false })}
  // 关闭下拉后确保Tooltip保持关闭状态（加个延迟避免交互冲突）
  onClose={() => {
    setTimeout(() => {
      this.setState({ tooltipOpen: false });
    }, 200);
  }}
>

完整修复后的代码：

class YourComponent extends React.Component {
  state = {
    age: "",
    tooltipOpen: false
  };

  handleChange = (event) => {
    this.setState({ age: event.target.value });
  };

  render() {
    return (
      <Tooltip
        title="Tooltip Test"
        open={this.state.tooltipOpen}
        onOpen={() => this.setState({ tooltipOpen: true })}
        onClose={() => this.setState({ tooltipOpen: false })}
      >
        <Select
          value={this.state.age}
          onChange={this.handleChange}
          inputProps={{ name: "age", id: "age-simple" }}
          onOpen={() => this.setState({ tooltipOpen: false })}
          onClose={() => {
            setTimeout(() => {
              this.setState({ tooltipOpen: false });
            }, 200);
          }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>...</MenuItem>
        </Select>
      </Tooltip>
    );
  }
}

方案二：禁用Tooltip的悬停触发（适合仅点击触发的场景）

如果你的Tooltip只需要在点击时显示，不需要悬停触发，可以直接给Tooltip添加disableHoverListener属性：

<Tooltip title="Tooltip Test" disableHoverListener>
  <Select
    value={this.state.age}
    onChange={this.handleChange}
    inputProps={{ name: "age", id: "age-simple" }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>...</MenuItem>
  </Select>
</Tooltip>

这样Tooltip只会在你点击Select时显示，选择完选项后点击其他区域（包括页面空白处）就会自动关闭，完美解决问题。

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