Refactor multiselect to ngbDropdown

frontend/src/app/data-entry/shared/label-select/label-select.component.html

@@ -7,7 +7,7 @@
         >
             <span class="ms-1">{{ label.label }}</span>
             <button
-                class="btn btn-sm btn-primary"
+                class="btn btn-sm btn-primary py-0 px-1 ms-1"
                 type="button"
                 [attr.aria-label]="'remove ' + label.label"
                 (click)="removeLabel(label.value)"
@@ -27,6 +27,7 @@
         id="label-select"
         [options]="options"
         [formControl]="control"
-        placeholderEmpty="Select a label from the list below."
+        [showSelected]="true"
+        placeholderEmpty="Select a label"
     />
 </form>

frontend/src/app/data-entry/shared/multiselect/multiselect.component.html

@@ -1,27 +1,31 @@
-<select
-    *ngIf="visibleOptions() as options"
-    class="form-select"
-    [title]="placeholderEmpty"
-    aria-multiselectable="true"
-    tabindex="0"
-    [disabled]="disabled"
->
-    <ng-container *ngIf="options.length > 0; else noOptions">
-        <option class="visually-hidden" [attr.aria-disabled]="true">
-            {{ placeholderEmpty }}
-        </option>
-    </ng-container>
-    <ng-template #noOptions>
-        <option class="visually-hidden" [attr.aria-disabled]="true">
-            {{ noAvailableOptions }}
-        </option>
-    </ng-template>
-    <option
-        *ngFor="let option of options; let i = index; trackBy: trackById"
-        (click)="selectOption(option)"
-        [attr.aria-selected]="selectedOptions().includes(option.value)"
-        tabindex="1"
+<div *ngIf="visibleOptions() as options" ngbDropdown>
+    <button
+        class="btn btn-primary"
+        id="labels-menu"
+        type="button"
+        ngbDropdownToggle
     >
-        <span>{{ option.label }}</span>
-    </option>
-</select>
+        {{ placeholderEmpty }}
+    </button>
+    <div aria-labelledby="labels-menu" ngbDropdownMenu>
+        <ng-container *ngIf="options.length > 0; else noOptions">
+            <button
+                *ngFor="
+                    let option of options;
+                    let i = index;
+                    trackBy: trackById
+                "
+                (click)="selectOption(option)"
+                [disabled]="selectedOptions().includes(option.value)"
+                ngbDropdownItem
+            >
+                {{ option.label }}
+            </button>
+        </ng-container>
+        <ng-template #noOptions>
+            <button ngbDropdownItem disabled>
+                {{ noAvailableOptions }}
+            </button>
+        </ng-template>
+    </div>
+</div>

frontend/src/app/data-entry/shared/multiselect/multiselect.component.ts

@@ -1,5 +1,6 @@
-import { Component, forwardRef, Input, signal, computed } from "@angular/core";
+import { Component, forwardRef, Input, signal, computed, ViewChild, ElementRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
+import { NgbDropdownToggle } from "@ng-bootstrap/ng-bootstrap";
 
 export interface MultiselectOption {
     value: string;
@@ -26,6 +27,7 @@ export class MultiselectComponent implements ControlValueAccessor {
     // A placeholder to be shown when nothing has been selected.
     @Input() placeholderEmpty = "Select an option from the list below...";
     @Input() noAvailableOptions = "No options available";
+    @ViewChild(NgbDropdownToggle) toggler: NgbDropdownToggle | null = null;
 
     public selectedOptions = signal<string[]>([]);
     public disabled = false;
@@ -54,6 +56,8 @@ export class MultiselectComponent implements ControlValueAccessor {
         // Propagate change to parent component.
         this.onChange?.(selectedIds);
         this.onTouched?.();
+        // Keeps the focus on the toggler after selecting an option.
+        this.toggler?.nativeElement.focus();
     }
 
     public trackById(_index: number, option: MultiselectOption): string {