fix: blur behavior (#2177)

* fix: blur behavior
telekom · Nov 3, 2023 · 4f86750 · 4f86750
1 parent 90b8bb9
commit 4f86750
Showing 1 changed file with 6 additions and 12 deletions.
diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx
@@ -218,7 +218,6 @@ export class DropdownSelect {
   @State() currentIndex: number = -1;
   @State() queryString: string = '';
   @State() queryTimeout: any = null;
-  @State() ignoreBlur: boolean = false;
   @State() hasFocus: boolean = false;
 
   private comboEl: HTMLElement;
@@ -233,9 +232,6 @@ export class DropdownSelect {
   }
 
   connectedCallback() {
-    if (this.hostElement.closest('scale-tab-panel')) {
-      this.ignoreBlur = true;
-    }
     statusNote({ source: this.hostElement, tag: 'beta' });
     this.currentIndex =
       readOptions(this.hostElement).findIndex(
@@ -375,10 +371,6 @@ export class DropdownSelect {
   };
 
   handleBlur = () => {
-    if (this.ignoreBlur) {
-      this.ignoreBlur = false;
-      return;
-    }
     this.setOpen(false);
     emitEvent(this, 'scaleBlur');
   };
@@ -454,7 +446,12 @@ export class DropdownSelect {
               </span>
             </div>
             <div part="listbox-pad" ref={(el) => (this.listboxPadEl = el)}>
-              <div part="listbox-scroll-container">
+              <div
+                part="listbox-scroll-container"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}
+              >
                 <div
                   ref={(el) => (this.listboxEl = el)}
                   part="listbox"
@@ -474,9 +471,6 @@ export class DropdownSelect {
                         onClick={(event) => {
                           this.handleOptionClick(event, index);
                         }}
-                        onMouseDown={() => {
-                          this.ignoreBlur = true;
-                        }}
                         {...(value === this.value
                           ? { 'aria-selected': 'true' }
                           : {})}