0

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

Felix Engelmann
  • 399
  • 5
  • 17

1 Answers1

3

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>
Eudes
  • 1,521
  • 9
  • 17