Stop click propagation in accordion header

Ionic Framework Ionic React
#1

Hello,

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:
Capture
And here is my code snippet:

<IonList>
    <IonAccordionGroup expand="inset">
        <IonAccordion>
            <IonItem slot="header" className="accordion-header">
                <IonLabel>
                    Identité
                    <IonNote className="item-status"
                        style={{
                            color: getStatusColor(status.identity)
                        }}>
                        {docStatusList[status.identity]}
                    </IonNote>
                </IonLabel>
                <IonButton onClick={(e) => {
                    e.stopPropagation();
                    setHelp({
                        display: true,
                        header: "Aide identité",
                        message: getIdentityHelpMessage()
                    });
                 }}>
                     <IonIcon icon={informationCircleOutline} />
                 </IonButton>
             </IonItem>

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

#2

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');
        e.stopPropagation()
      } 
    }
  }, [button])

Where the button will have a native click handler.

Here’s a stackoverflow post to explain why in detail

1 Like
#3

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