Merge pull request #2255 from ing-bank/fix/dropdown-tel

fix: optimize the way we focus the input field for LionInputTelDropdown
ing-bank · Apr 16, 2024 · ffa0bd5 · ffa0bd5
2 parents 29104e8 + ac78346
commit ffa0bd5
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 44 deletions.
diff --git a/.changeset/wise-lemons-hug.md b/.changeset/wise-lemons-hug.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[lion-input-tel-dropdown] Focus input fieled after dropdown menu is closed
diff --git a/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js b/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
@@ -83,6 +83,7 @@ export class IntlInputTelDropdown extends ScopedElementsMixin(LionInputTelDropdo
           ${ref(refs?.dropdown?.ref)}
           label="${refs?.dropdown?.labels?.country}"
           label-sr-only
+          .config="${{ elementToFocusAfterHide: refs?.input }}"
           @model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
           style="${refs?.dropdown?.props?.style}"
         >

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@custom-elements-manifest/analyzer": "^0.8.0",
     "@open-wc/building-rollup": "^1.10.0",
     "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/scoped-elements": "^3.0.5",
     "@open-wc/testing": "^3.1.7",
     "@open-wc/testing-helpers": "^2.2.0",
     "@rocket/blog": "^0.4.0",

diff --git a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
@@ -100,6 +100,7 @@ export class LionInputTelDropdown extends LionInputTel {
             localizeManager.msg('lion-input-tel:suggestedCountries'),
         },
       },
+      input: this._inputNode,
     };
 
     return {
@@ -357,19 +358,6 @@ export class LionInputTelDropdown extends LionInputTel {
         }
       }
     }
-
-    // Put focus on text box
-    //
-    // A LionSelectRich with interactionMode set on windows/linux
-    // will set each item on arrow key up/down to activeElement
-    // which causes the focus to jump every time to the inputNode
-    const overlayController = dropdownElement._overlayCtrl;
-    // @ts-ignore interactionMode only exists on LionSelectRich not on HTMLSelectElement
-    if (overlayController?.isShown && dropdownElement.interactionMode !== 'windows/linux') {
-      setTimeout(() => {
-        this._inputNode.focus();
-      });
-    }
   }
 
   /**

diff --git a/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js b/packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
@@ -152,6 +152,8 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
                 props: { style: 'height: 100%;' },
                 ref: { value: dropdownNode },
               },
+              // @ts-expect-error [allow-protected]
+              input: el._inputNode,
             },
           }),
         );

diff --git a/packages/ui/components/input-tel-dropdown/types/index.ts b/packages/ui/components/input-tel-dropdown/types/index.ts
@@ -36,6 +36,7 @@ export type TemplateDataForDropdownInputTel = {
       };
       labels: { selectCountry: string };
     };
+    input: HTMLInputElement;
   };
   data: {
     activeRegion: string | undefined;
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,7 @@ export type TemplateDataForDropdownInputTel = { @@
           };
           labels: { selectCountry: string };
         };
+        input: HTMLInputElement;
       };
       data: {
         activeRegion: string | undefined;
@@ Expand Down @@