Prevent expand on click on prime ng accordion

1
votes

I have an primeng accordion and the accordion header has a checkbox control . Whenever i check/uncheck checkbox , the accordion tab is getting open/closed automatically

Is there any way to prevent expand/collapse on click on checkbox ? It should expand/collapse on header other than check/uncheck check box ?

enter image description here

2
angular6accordionprimeng
Can you please share stackblitz sample of it. – RANJIT PATRA

2 Answers

2
votes

This is happening due to Event Bubbling. For this need to stop eventPropagation by calling stopPropagation() of MouseEvent.

Accordion html code sample

<p-accordion>
    <p-accordionTab header="Godfather I" [selected]="true">
        <p-header>
            <span>Godfather I
              <input type="checkbox" (click)="onClick($event)">
            </span>
        </p-header>
        Some Text
    </p-accordionTab>
</p-accordion>

Corresponding component ts code.

onClick($event: MouseEvent){
    $event.stopPropagation();
}

For Reference added stackblitz code sample.

1
votes

This is how I solved this issue. This is happening because of Event Bubbling. So when you click on child element. Event propagate to its parent and so on. So Just use stop propagation on event. It will prevent the click event on your accordion. Below code for your reference.

Accordian with Check box code I used (onChange) method.

<p-accordionTab>
    <p-header>
      <div class="ui-g" style="width:250px;margin-bottom:10px">
        <div class="ui-g-12"><p-checkbox name="group1" #ck value="New York" label="New York" [(ngModel)]="selectedCities" (onChange)="checkChange($event)" inputId="ny"></p-checkbox></div>
        </div>
  </p-header>
  </p-accordionTab>

component.ts

selectedCities: string[] = [];
//Simply you have to to stop propogation here. 
checkChange(e:any){
        console.log(e); // true or false.
        event.stopPropagation(); // component will have direct access to event here.
}