fix: use paste event to open popover in fd-combobox (#11565)

* fix(core): open combobox on paste event * fix: use string instead of ClipboardEvent due to browser incompatibility * fix: build --------- Co-authored-by: deno <mladen.droshev@sap.com>
SAP · Mar 25, 2024 · 3511002 · 3511002
1 parent dbdaa51
commit 3511002
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 33 deletions.
diff --git a/libs/core/src/lib/combobox/combobox.component.html b/libs/core/src/lib/combobox/combobox.component.html
@@ -85,6 +85,7 @@
             [(ngModel)]="inputText"
             (onComplete)="handleAutoComplete($event)"
             (keydown)="onInputKeydownHandler($event)"
+            (paste)="onInputKeydownHandler('pasteEvent')"
             (ngModelChange)="handleSearchTermChange()"
             (blur)="handleBlur()"
         />

diff --git a/libs/core/src/lib/combobox/combobox.component.ts b/libs/core/src/lib/combobox/combobox.component.ts
@@ -438,46 +438,52 @@ export class ComboboxComponent
     }
 
     /** @hidden */
-    onInputKeydownHandler(event: KeyboardEvent): void {
+    onInputKeydownHandler(event: KeyboardEvent | string): void {
         if (this.readOnly) {
             return;
         }
 
-        if (KeyUtil.isKeyCode(event, TAB) && this.open) {
-            this._close();
-            return;
-        }
-
-        if (KeyUtil.isKeyCode(event, ENTER)) {
-            if (this.searchFn) {
-                this.searchFn();
-            }
-        } else if (KeyUtil.isKeyCode(event, DOWN_ARROW)) {
-            if (event.altKey) {
-                this._resetDisplayedValues();
+        if (typeof event === 'string') {
+            if (event === 'pasteEvent') {
                 this.isOpenChangeHandle(true);
             }
-            if (this.open && this.listComponent) {
-                this.listComponent.setItemActive(0);
-            } else if (!this.open) {
-                this._chooseOtherItem(1);
+        } else {
+            if (KeyUtil.isKeyCode(event, TAB) && this.open) {
+                this._close();
+                return;
             }
-            event.preventDefault();
-        } else if (KeyUtil.isKeyCode(event, UP_ARROW)) {
-            this._chooseOtherItem(-1);
-            event.preventDefault();
-        } else if (KeyUtil.isKeyCode(event, this.closingKeys)) {
-            this.isOpenChangeHandle(false);
-            event.stopPropagation();
-        } else if (
-            this.openOnKeyboardEvent &&
-            !event.ctrlKey &&
-            !event.altKey &&
-            !KeyUtil.isKeyCode(event, this.nonOpeningKeys)
-        ) {
-            this.isOpenChangeHandle(true);
-            if (this.isEmptyValue && KeyUtil.isKeyType(event, 'control') && !KeyUtil.isKeyCode(event, BACKSPACE)) {
-                this.listComponent.setItemActive(0);
+
+            if (KeyUtil.isKeyCode(event, ENTER)) {
+                if (this.searchFn) {
+                    this.searchFn();
+                }
+            } else if (KeyUtil.isKeyCode(event, DOWN_ARROW)) {
+                if (event.altKey) {
+                    this._resetDisplayedValues();
+                    this.isOpenChangeHandle(true);
+                }
+                if (this.open && this.listComponent) {
+                    this.listComponent.setItemActive(0);
+                } else if (!this.open) {
+                    this._chooseOtherItem(1);
+                }
+                event.preventDefault();
+            } else if (KeyUtil.isKeyCode(event, UP_ARROW)) {
+                this._chooseOtherItem(-1);
+                event.preventDefault();
+            } else if (KeyUtil.isKeyCode(event, this.closingKeys)) {
+                this.isOpenChangeHandle(false);
+                event.stopPropagation();
+            } else if (
+                this.openOnKeyboardEvent &&
+                !event.ctrlKey &&
+                !event.altKey &&
+                !KeyUtil.isKeyCode(event, this.nonOpeningKeys)
+            ) {
+                this.isOpenChangeHandle(true);
+                if (this.isEmptyValue && KeyUtil.isKeyType(event, 'control') && !KeyUtil.isKeyCode(event, BACKSPACE)) {
+                    this.listComponent.setItemActive(0);
+                }
             }
         }
     }