Collapse / Accordion auto closing when click on the child element Actions

Question

Accordion / Collapse is closing automatically when clicked on the child element Button. How can it be prevented ?

Sandbox: https://codesandbox.io/s/restless-tdd-9qzmb3?file=/src/App.js

export default function App() {
  const [accordion, setAccordion] = useState([true, false]);
  const handleCollapse = useCallback(
    (newIdx) => {
      const state = accordion.map((val, index) =>
        index === newIdx ? !val : false
      );
      setAccordion(state);
    },
    [accordion]
  );

  return (
    <div className="App">
      <div
        style={{ marginTop: "1rem", cursor: "pointer" }}
        onClick={() => handleCollapse(0)}
        aria-expanded={accordion[0]}
        aria-controls={"basic-collapsible-0"}
      >
        <Card sectioned>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <Text variant="headingMd" as="h6">
              Accordion 1
            </Text>
            <Icon source={accordion[0] ? ChevronUpMinor : ChevronDownMinor} />
          </div>
          <Collapsible
            open={accordion[0]}
            id="basic-collapsible"
            transition={{ duration: "400ms", timingFunction: "ease-in-out" }}
          >
            <div style={{ padding: "5rem" }}>
              <Button onClick={() => {}}>Child Action 1</Button>
            </div>
          </Collapsible>
        </Card>
      </div>

      
    </div>
  );
}

Answer 1

Move your onClick handler from the parent element to the toggler element Then it will not affect your child's element. But if it's necessary the you keep your click handler on the parent element You have two options.

1: Prevent child elements from propagating the event by placing a click handler on them like this <div onClick={e=> e.stopPropagation()}> which will become really difficult as your child element grows.

2: Check if the clicked element is inside your parent div.

use e.currentElement to get the element you assigned the event to

use e.target to get the element that triggered this event

Then you can use the contains method to check if clicked element is a children of the parent element

e.g e.currentElement.contains(e.target)