React-Select 与 MUI 手风琴冲突

Question

我很难过。我进行了多次 Google 搜索并查看了 react-select and Material UI Accordion 文档。之前似乎没有人遇到过这个问题，这让我很惊讶，因为这些都是非常流行的组件库。

我一直在单独使用组件，没问题，激活了 isSearchable 和 isMulti 属性。行为符合预期。当我在框中键入内容时，它会相应地自动过滤选项下拉列表。

但是，只有当我将此组件放入 MUI 组件的内容窗格时，事情才会出现故障：用户在两个字符后的键入操作导致 select 小部件失去焦点，页面滚动到某个未知的锚点，用户键入的文本不会保留在 select 框中，选项下拉列表甚至不会出现。即使选项列表中只有少量选项（例如 5-10），也会出现此故障。

有没有人对这两个组件的交互有任何经验？是否缺少某些组件属性切换？我猜测 Accordion 正在以一种覆盖 CreatableSelect 行为的方式响应击键。

import MuiAccordion from "@mui/material/Accordion";
import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import CreatableSelect from "react-select/creatable";

const FilterBox = ({.... various props .... }) => {

  const Accordion = styled(MuiAccordion)(({ theme }) => ({
   
  }));
  const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
  
  }));
  const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  

  }));

return (
<Accordion>
  <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>
)

}

Answer 1

经过进一步调查，我发现问题出在 MUI legacy styling. When I switched over to the newer sx prop paradigm, the issue went away. I still have no idea why styled() would interfere with user interaction. But given that this approach is deprecated, I'm not going to bother to figure that out! Just switch over to MUI "system" 中的 styled() 函数，您可以开始了。

React-Select 与 MUI 手风琴冲突

React-Select conflicting with MUI Accordion

accordion

reactjs

react-select

material-ui