diff --git a/frontend/src/app/data-entry/shared/label-select/label-select.component.html b/frontend/src/app/data-entry/shared/label-select/label-select.component.html index 01370fb0..60ed29f7 100644 --- a/frontend/src/app/data-entry/shared/label-select/label-select.component.html +++ b/frontend/src/app/data-entry/shared/label-select/label-select.component.html @@ -7,7 +7,7 @@ > {{ label.label }} +
+ + + + + + +
+ diff --git a/frontend/src/app/data-entry/shared/multiselect/multiselect.component.ts b/frontend/src/app/data-entry/shared/multiselect/multiselect.component.ts index 4908381b..6b75cbba 100644 --- a/frontend/src/app/data-entry/shared/multiselect/multiselect.component.ts +++ b/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([]); 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 {