Stop click propagation in accordion header


I’m working on an Ionic React application and I can’t get to stop click propagation in accordion headers. When I click on my information button (located in accordion header), the accordion expands no matter what I try.
Here is a capture:
And here is my code snippet:

    <IonAccordionGroup expand="inset">
            <IonItem slot="header" className="accordion-header">
                    <IonNote className="item-status"
                            color: getStatusColor(status.identity)
                <IonButton onClick={(e) => {
                        display: true,
                        header: "Aide identité",
                        message: getIdentityHelpMessage()
                     <IonIcon icon={informationCircleOutline} />

This stopPropagation method works everywhere else in the code, just not for accordion headers.
Any help would be very much apreciated !
Thank you !

React and synthetic events strike again!

TL;DR, the click event from your button isn’t a real click event, but one that react will dispatch in place of a native click. So your stopProp call won’t actually work.

What you can do is wire up something like this…

const button = useRef(null);
  useEffect(() => {
    if (button.current) {
      (button.current as HTMLElement).onclick = (e) => {
        console.log('handler stop');
  }, [button])

Where the button will have a native click handler.

Here’s a stackoverflow post to explain why in detail

1 Like

It works fine,
Thx for the explanation !

Actually, I was a little bit too fast to answer. The useEffect is not thrown unless I make a modification in the file just before I try…
Never seen that before (but my experience isn’t that big).

Any idea why ??