Search code examples
javascripthtmlvue.jsprimevue

Primevue Accordion : don't open on click

I'm working with primevue and I'm wondering if there is a way to prevent the accordion from openning when clicked on a specific input.
Here is my accordion-header :

<accordion-header>
   <div>
      <span>Something</span>
      <Checkbox
        :model-value="thing"
        :binary="true"
        @input="toggle"
      />
   </div>
</accordion-header>

When I click on the CheckBox (which is primevue checkbox btw), I would like to not open the menu.
I tried to change the z-index of the checkbox but it didn't work. Any idea ?

Solution

  • You can add @click.stop directive in the checkbox. The directive stops the click event from propagating to the parent elements.

        <accordion-header>
   <div>
      <span>Something</span>
      <Checkbox
        :model-value="thing"
        :binary="true"
        @input="toggle"
        @click.stop
      />
   </div>
</accordion-header>