Material UI x React Autocomplete点击选项内图标弹出Popover时列表关闭问题

问题根因 #

点击选项内的更多图标时，事件向上冒泡到Autocomplete的外层容器，同时Popover弹出时的焦点切换逻辑会被Autocomplete识别为「点击下拉列表外部区域」，触发默认的关闭规则。另外你当前的实现没有将useAutocomplete返回的getOptionProps绑定到选项根元素，导致Autocomplete无法正确识别该区域为下拉列表内部交互区域。

修复步骤 #

1. 阻止图标点击事件的冒泡，避免触发Autocomplete的关闭逻辑
   修改Item.js中的openDeleteItem方法：

const openDeleteItem = (event) => {
  // 新增这两行，阻止事件向上传递
  event.stopPropagation();
  event.preventDefault();
  setAnchorEl(event.currentTarget);
  setIsOpen(true);
};

2. 调整Popover的焦点逻辑，避免和Autocomplete的焦点检测冲突
   修改Popup.js中的Popover组件配置，新增两个属性：

<Popover
  id={prop.isOpen ? 'simple-popover' : undefined}
  open={prop.isOpen}
  anchorEl={prop.anchorEl}
  onClose={() => prop.onClose()}
  // 新增以下两个属性
  disableRestoreFocus
  disableEnforceFocus
/>

3. 正确绑定Autocomplete的选项属性，让组件识别内部交互
   首先修改App.js中的列表渲染逻辑，将getOptionProps传递给子组件：

groupedOptions.map((option, index) => (
  <Item 
    key={index} 
    text={option.label} 
    onClose={() => {}} 
    // 传递Autocomplete生成的选项属性
    optionProps={getOptionProps({ option, index })}
  />
))

然后修改Item.js中的Box根组件，绑定传入的属性：

<Box
  // 绑定选项属性
  {...prop.optionProps}
  onMouseOver={() => setOnMouseOver(true)}
  onMouseOut={() => isOpen || setOnMouseOver(false)}
>

如果完成以上修改后还有偶发的关闭问题，可以在useAutocomplete的配置中新增onClose拦截逻辑，手动控制关闭时机即可。

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