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>