1

I have a problem with Prime React Accordion structure. Since I want it to be toggled only after clicking on the toggle icon, I tried to somehow prevent default event.

This is how my code looks like:

<Accordion
                    multiple
                    activeIndex={[0]}
                    onTabOpen={(event) => accordionClickHandler(event)}
                    onTabClose={(event) => accordionClickHandler(event)}
                >
    const isAccordionToggleIconClicked = (params: AccordionEventParams): boolean => {
        return (params.originalEvent.target as Element).classList.contains("p-accordion-toggle-icon");
    };

    const accordionClickHandler = (params: AccordionEventParams): void => {
        if (!isAccordionToggleIconClicked(params)) {
            console.log("shouldn't toggle");
            params.originalEvent.nativeEvent.preventDefault();
            params.originalEvent.nativeEvent.stopPropagation();
            params.originalEvent.nativeEvent.stopImmediatePropagation();
            return;
        } else {
            console.log("should toggle");
        }
    };

Even if "shouldn't toggle" is being printed, accordion is being toggled. Of course I tried to call all these methods on original event (not nativeEvent) one too. I even tried to modify my Accordion in such way but nothing changes:

<Accordion
                    multiple
                    activeIndex={[0]}
                    onTabOpen={(event) => accordionClickHandler(event)}
                    onTabClose={(event) => accordionClickHandler(event)}
                    onClick={(event) => {
                        event.nativeEvent.preventDefault();
                        event.nativeEvent.stopPropagation();
                        event.nativeEvent.stopImmediatePropagation();
                    }}
                >

I would be glad for any help since I really enjoy Prime React Accordions and I really want to use them in my project.

  • What about not using `nativeEvent` and just doing... ```js params.originalEvent.preventDefault(); params.originalEvent.stopPropagation(); params.originalEvent.stopImmediatePropagation(); ``` – Melloware Nov 07 '22 at 13:26

0 Answers0