🐛 fix(): Replace timeout with await waitAfterIdleCallback in inputSet…

…Focus (#1177) * fix(): Replace timeout with await waitAfterIdleCallback in inputSetFocus * chore: add missing select --------- Co-authored-by: Mladen Planinicic <[email protected]> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · Dec 5, 2023 · 8a851fa · 8a851fa
1 parent 160f163
commit 8a851fa
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/.changeset/kind-parrots-hide.md b/.changeset/kind-parrots-hide.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Replace timeout with 'await waitAfterIdleCallback()' in inputSetFocus.
diff --git a/packages/components/src/components/bal-select/bal-select.tsx b/packages/components/src/components/bal-select/bal-select.tsx
@@ -13,7 +13,7 @@ import {
   ComponentInterface,
 } from '@stencil/core'
 import isNil from 'lodash.isnil'
-import { debounce, deepReady, isDescendant, rIC } from '../../utils/helpers'
+import { debounce, deepReady, isDescendant, rIC, waitAfterIdleCallback } from '../../utils/helpers'
 import {
   areArraysEqual,
   isArrowDownKey,
@@ -392,12 +392,10 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
    */
   @Method()
   async setFocus() {
-    clearTimeout(this.setFocusTimer)
-    this.setFocusTimer = setTimeout(() => {
-      if (this.inputElement && !this.disabled) {
-        this.inputElement.focus()
-      }
-    })
+    if (this.inputElement && !this.disabled) {
+      await waitAfterIdleCallback()
+      this.inputElement.focus()
+    }
   }
 
   /**
@@ -523,8 +521,6 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
     }
   }
 
-  private setFocusTimer?: NodeJS.Timer
-
   /**
    * GETTERS
    * ------------------------------------------------------

diff --git a/packages/components/src/utils/form-input.ts b/packages/components/src/utils/form-input.ts
@@ -1,4 +1,5 @@
 import { EventEmitter } from '@stencil/core'
+import { waitAfterIdleCallback } from './helpers'
 
 export interface FormInput<Value> {
   el: HTMLElement
@@ -47,14 +48,9 @@ export const inputListenOnClick = <Value>(component: FormInput<Value>, ev: UIEve
   }
 }
 
-let inputSetFocusTimer: NodeJS.Timer | undefined
-export const inputSetFocus = <Value>(component: FormInput<Value>): void => {
-  clearTimeout(inputSetFocusTimer)
-  inputSetFocusTimer = setTimeout(() => {
-    if (component.nativeInput) {
-      component.nativeInput.focus()
-    }
-  }, 0)
+export const inputSetFocus = async <Value>(component: FormInput<Value>): Promise<void> => {
+  await waitAfterIdleCallback()
+  component?.nativeInput?.focus()
 }
 
 export const inputHandleHostClick = <Value>(component: FormInput<Value>, ev: MouseEvent) => {