我被难住了。我做了很多谷歌搜索，也看了react-select和Material UI Accordion文档。以前似乎没有人遇到过这个问题，这让我很惊讶，因为这些都是非常流行的组件库。
我一直在使用**** 组件，没有问题，激活了isSearchable和isMulti属性。行为符合预期。当我在框中键入时，它会相应地自动过滤选项的下拉列表。
但是，只有当我将此组件放入MUI****组件的内容窗格中时，情况才会出现问题：用户在输入两个字符后的输入操作会导致选择小部件失去焦点，页面滚动到某个未知的锚点，用户输入的文本不会保留在选择框中，选项下拉列表甚至不会出现。即使选项列表中只有少量选项（例如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>
)
}
2条答案
按热度按时间hs1ihplo1#
经过进一步调查，我发现问题出在风格上（）函数。当我切换到较新的sxprop范例时，这个问题就消失了。我仍然不知道为什么要（）会干扰用户交互。但考虑到这种方法已被弃用，我不想费心去弄清楚这个问题！只要切换到MUI "system"，就可以开始了。
pinkon5k2#
我也有同样的问题，但是我使用了从材质界面中选择。当我为选择设置属性disablePortal如“False”时，出现了这个问题。请尝试使用从材质界面中选择门户或仅门户。