Search code examples
reactjsmaterial-uiaccordionreact-select

React-Select conflicting with MUI Accordion

I'm stumped. I've done a number of Google searches as well as looked at react-select and Material UI Accordion docs. No one seems to have encountered this issue before, which surprises me, as these are very popular component libraries.

I've been using the <CreatableSelect> component on its own, no problem, with isSearchable and isMulti properties activated. Behavior is as expected. When I type in the box it auto-filters the dropdown list of options accordingly.

However, things get glitchy only when I put this component into the content pane of an MUI <Accordion> component: the typing action of the user after two characters causes the select widget to lose focus, the page scrolls to some unknown anchor point, and the user's typed text does not remain in the select box, and the dropdown list of options doesn't even appear. This glitch occurs even if there are only a small number of options (e.g. 5-10) in the options list.

Does anyone have any experience with the interactivity of these two components? Is there some component property toggle I am missing? I am guessing that the Accordion is responding to keystrokes in a way that is overriding the CreatableSelect's behavior.

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>
)

}
Solution

  • Upon further investigation, I figured out that the problem is the styled() function from 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" and you're good to go.