如何让Material UI Autocomplete选中指定选项后保持展开

使用Material UI的Autocomplete组件时，希望选中带有dontClose标记的选项时，组件保持展开状态。但目前选中选项触发onChange事件后，组件会自动关闭，且未找到内置设置选项。已为目标选项添加标记：

const top100Films = [
  { label: "DONT CLOSE ME IF IM SELECTED", year: 2023, dontClose: true },
  { label: "The Shawshank Redemption", year: 1994 },
  { label: "The Godfather", year: 1972 },
  ...
]

尝试通过state控制open属性并在onChange中处理，但未生效：

export default function ComboBox() {
  const [dontClose, setDontClose] = React.useState(false);
  return (
    <Autocomplete
      {...otherProps}
      open={dontClose ? true : undefined}
      onChange={(_, value) => {
        if (value?.dontClose) {
          console.log("please dont close");
          setDontClose(true);
        } else {
          console.log("close me");
        }
      }}
    />
  );
}

需要实现选中指定选项后Autocomplete保持展开的方法。

解决方案 #

方法一：通过onClose事件拦截关闭操作 #

Autocomplete选中选项后会自动触发关闭逻辑，可在onClose事件中判断当前选中值是否带有dontClose标记，若有则阻止关闭，同时配合state严格控制open状态：

export default function ComboBox() {
  const [open, setOpen] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState(null);

  return (
    <Autocomplete
      {...otherProps}
      open={open}
      onOpen={() => setOpen(true)}
      onClose={(event, reason) => {
        // 仅当选中的选项不带dontClose标记时，才允许关闭组件
        if (!selectedValue?.dontClose) {
          setOpen(false);
        }
      }}
      onChange={(_, value) => {
        setSelectedValue(value);
        // 选中带标记的选项时，强制保持展开
        if (value?.dontClose) {
          setOpen(true);
        }
      }}
      options={top100Films}
      renderInput={(params) => <TextField {...params} label="Films" />}
    />
  );
}

方法二：利用useEffect动态调整展开状态 #

通过useEffect监听选中值的变化，当选中带dontClose标记的选项时，立即将open设为true，覆盖组件的自动关闭行为：

export default function ComboBox() {
  const [open, setOpen] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState(null);

  React.useEffect(() => {
    if (selectedValue?.dontClose) {
      setOpen(true);
    }
  }, [selectedValue]);

  return (
    <Autocomplete
      {...otherProps}
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => {
        if (!selectedValue?.dontClose) {
          setOpen(false);
        }
      }}
      onChange={(_, value) => {
        setSelectedValue(value);
      }}
      options={top100Films}
      renderInput={(params) => <TextField {...params} label="Films" />}
    />
  );
}

核心要点 #

• 必须显式给open传递布尔值（不能用undefined），否则组件内部状态会覆盖你的自定义设置。
• onClose事件是拦截自动关闭的关键，因为Autocomplete选中选项后会触发内部的关闭流程，需要在此阶段判断是否允许执行关闭。

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