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.