Click on list item in conditionally activated list doesn´t trigger

Question

I have a dropdown selection menu which consists of a list which is only activated when i click on a button. I want to change the selected value when one of the list items is clicked. But (click)="subject_select(subject)" doesn´t get triggered. I think that the list is disabled before the click event can do anything. That is because when i remove the (focusout)="toggleSelectionMenu()" the selection works but i want the list to disappear when the user clicks outside of the button.

The [@selectionMenuInOut] animation is set to 100ms, so that shouldn´t be the problem.

<div>
<button type="button"
    (click)="toggleSelectionMenu()" (focusout)="toggleSelectionMenu()">
    <span> {{ selected }} </span>
</button>
<ul
    tabindex="-1" *ngIf="selectionMenu==true" [@selectionMenuInOut]>
    <li (click)="subject_select(subject)" *ngFor="let subject of subjects">
        <span>{{ subject }}</span>
    </li>
</ul>
</div>

My typescript functions are:

  selectionMenu: boolean = false;
  subjects = ['Website errors', 'Need support', 'Pizza!'];
  selected: string = 'Choose subject of the request';
  subject_select(subject: string) {
    this.selected = subject;
  }

  toggleSelectionMenu() {
    this.selectionMenu = !this.selectionMenu;
  }

score 1 · Accepted Answer · answered Jul 16 '22 at 14:44

This is what happens when clicking a list element:

The onmousedown event fires
The focusout event on the toggle button fires
The list is being removed from the DOM
The onmouseup event doesn't fire because the element doesn't exist anymore, so the click event doesn't fire

In my opinion it's a bad idea to implement the outside click by using the focusout event on the toggle button. Not only it causes this bug, it also makes the element not accessible by keyboard. See this question for alternatives: How to detect click outside of an element in Angular?

Click on list item in conditionally activated list doesn´t trigger

1 Answers1