[EC-1028] [Design feedback] There is no way to close the multi-select with the keyboard when it is in a modal (#4627)

* [EC-1028] feat: close dropdown on `enter`

* [EC-1028] fix: form submitting on enter

* [EC-1028] feat: close dropdown on escape

Close dropdown on escape, otherwise allow propagation so that modals can be closed with another escape click.

* [EC-1028] feat: allow submit form using enter when dropdown is closed

libs/components/src/multi-select/multi-select.component.html

@@ -17,6 +17,7 @@
   [disabled]="disabled"
   [clearSearchOnAdd]="true"
   [labelForId]="labelForId"
+  [keyDownFn]="keyDown"
   appendTo="body"
 >
   <ng-template ng-loadingspinner-tmp>

libs/components/src/multi-select/multi-select.component.ts

@@ -1,3 +1,4 @@
+import { hasModifierKey } from "@angular/cdk/keycodes";
 import {
   Component,
   Input,
@@ -67,6 +68,29 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
     this.loadingText = this.i18nService.t("multiSelectLoading");
   }
 
+  /** Function for customizing keyboard navigation */
+  /** Needs to be arrow function to retain `this` scope. */
+  keyDown = (event: KeyboardEvent) => {
+    if (!this.select.isOpen && event.key === "Enter" && !hasModifierKey(event)) {
+      return false;
+    }
+
+    if (this.select.isOpen && event.key === "Enter" && !hasModifierKey(event)) {
+      this.select.close();
+      event.preventDefault();
+      return false;
+    }
+
+    if (this.select.isOpen && event.key === "Escape" && !hasModifierKey(event)) {
+      this.selectedItems = [];
+      this.select.close();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
   /** Helper method for showing selected state in custom template */
   isSelected(item: any): boolean {
     return this.selectedItems?.find((selected) => selected.id === item.id) != undefined;