CODEWITHSUNDEEP
angularvmware-clarityclarity
Felix Engelmann
Felix Engelmann

Reputation: 437

vmware Clarity: Define different clrCloseMenuOnItemClick behaviour per dropdown item

I have a standard Clarity dropdown menu and I need to define the "close menu on item click" behaviour per item: So a click on the first dropdown menu item should close the menu, a click on the second item shouldn't. Is this possible? I'm sure this is not intended behaviour by the Clarity team but in my very rare usecase it makes sense.

Im using Angular 6 and Clarity 0.13.0

Upvotes: 0

Views: 328

Answers (1)

Eudes
Eudes

Reputation: 1661

You can easily do this custom behavior by using the two-way binding on [(clrIfOpen)], to force the dropdown to close in the few cases where you want it to. Here is a running example: https://stackblitz.com/edit/dropdown-close-on-some-clicks?file=src/app/app.component.html

Note that I had to use the de-sugarized syntax with <ng-template> to be able to use two-way binding with the structural directive:

<clr-dropdown [clrCloseMenuOnItemClick]="false">
  <button clrDropdownTrigger>...</button>
  <ng-template [(clrIfOpen)]="open">
    <clr-dropdown-menu>
      <button type="button" clrDropdownItem>Does not close</button>
      <button type="button" clrDropdownItem (click)="close()">Closes the dropdown</button>
      <button type="button" clrDropdownItem>Does not close either</button>
    </clr-dropdown-menu>
  </ng-template>
</clr-dropdown>

Upvotes: 3

Related Questions