Material-UI 4.10.2多折叠面板IE11异常：选中新面板时原选中面板无法关闭

I've run into similar cross-browser compatibility headaches with MUI's ClickAwayListener in IE11 before, and the root cause here is almost certainly IE11's quirky event bubbling/capturing behavior compared to modern browsers. When you click a sibling AccordionSummary, IE11 fails to trigger the ClickAwayListener from the previously expanded panel—unlike modern browsers where the event sequence plays out as expected.

The Most Reliable Fix: Use Controlled Accordion State #

Instead of relying on ClickAwayListener, opt for MUI's built-in controlled accordion pattern to achieve the "one panel open at a time" behavior. This approach is IE11-friendly and aligns with MUI's recommended usage.

Here's how to implement it step-by-step:

1. Maintain a state variable to track the ID of the currently expanded panel
2. Set each Accordion's expanded prop based on whether its ID matches the state value
3. Update the state when an AccordionSummary is clicked—either expand the panel (if closed) or collapse it (if already open)

Code Example:

import React, { useState } from 'react';
import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

function SingleOpenAccordions() {
  // Track the ID of the expanded panel (null means all are closed)
  const [expandedPanel, setExpandedPanel] = useState(null);

  const handlePanelClick = (panelId) => {
    // Toggle: if the panel is already open, close it; else open it (and close others)
    setExpandedPanel(current => current === panelId ? null : panelId);
  };

  return (
    <div>
      <Accordion expanded={expandedPanel === 'panel1'}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          onClick={() => handlePanelClick('panel1')}
        >
          <Typography>Panel 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Content for Panel 1... Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </Typography>
        </AccordionDetails>
      </Accordion>

      <Accordion expanded={expandedPanel === 'panel2'}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          onClick={() => handlePanelClick('panel2')}
        >
          <Typography>Panel 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Content for Panel 2... Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>

      <Accordion expanded={expandedPanel === 'panel3'}>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          onClick={() => handlePanelClick('panel3')}
        >
          <Typography>Panel 3</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Content for Panel 3... Donec vehicula augue eu neque.
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

export default SingleOpenAccordions;

Why This Works #

This controlled approach bypasses the ClickAwayListener entirely, so you don't have to wrestle with IE11's event handling quirks. It's also more predictable—you have full control over which panel is expanded at any time, and the logic is easy to debug or extend later.

If You Must Keep ClickAwayListener #

If you need to retain ClickAwayListener for other reasons, try these tweaks for IE11 compatibility:

• Add mouseEvent="onMouseDown" to your ClickAwayListener component—IE11 handles mousedown events more consistently than click events for this use case.
• Wrap all your accordions in a single container element, and attach the ClickAwayListener to this container instead of individual AccordionDetails. This ensures click events on sibling panels are captured properly.

But honestly, the controlled state method is the cleaner, more reliable solution for supporting IE11.

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