React-Select CreatableSelect与MUI Accordion交互异常问题咨询

问题根因 #

该冲突由MUI Accordion的默认键盘导航机制导致：Accordion默认会监听内部所有冒泡上来的键盘事件，当检测到字符输入、方向键等操作时，会自动执行焦点切换、面板折叠/展开的预设逻辑，覆盖了react-select的输入处理规则，最终出现输入中断、焦点丢失、输入内容重置、页面异常滚动的问题。

可行解决方案 #

方案1：阻止AccordionDetails区域的键盘事件冒泡 #

该方案不会影响Accordion头部的正常键盘导航能力，仅隔离内容区的事件，是兼容性最优的选择：

<AccordionDetails 
  onKeyDown={(e) => e.stopPropagation()}
>
  <CreatableSelect
    instanceId={label}
    aria-label={label}
    styles={selectCustomStyles}
    options={showOptions}
    isSearchable
    isMulti
    value={value}
    filterOption={handleFilterOption} 
  />
</AccordionDetails>

方案2：仅阻止CreatableSelect的键盘事件冒泡 #

如果AccordionDetails内还有其他需要响应Accordion键盘导航的组件，可以仅在select组件上阻止事件冒泡：

<CreatableSelect
  instanceId={label}
  aria-label={label}
  styles={selectCustomStyles}
  options={showOptions}
  isSearchable
  isMulti
  value={value}
  filterOption={handleFilterOption}
  onKeyDown={(e) => e.stopPropagation()} 
/>

方案3：直接禁用Accordion的全局键盘导航 #

如果不需要使用Accordion的键盘操作能力，可以直接关闭该特性，MUI 5及以上版本支持该属性：

<Accordion disableKeyboardNavigation>
  <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel-candidates-content"
    id="panel-candidates-header"
  >Search Items
  </AccordionSummary>
  <AccordionDetails>
    <CreatableSelect
      instanceId={label}
      aria-label={label}
      styles={selectCustomStyles}
      options={showOptions}
      isSearchable
      isMulti
      value={value}
      filterOption={handleFilterOption} 
    />
  </AccordionDetails>
</Accordion>

以上方案修改完成后，即可正常使用CreatableSelect的搜索、多选能力，同时Accordion的点击展开/收起功能不受影响。

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