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

fix: optimize the way we focus the input field for LionInputTelDropdown

.changeset/wise-lemons-hug.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[lion-input-tel-dropdown] Focus input fieled after dropdown menu is closed

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}"
         >

package-lock.json

@@ -18,6 +18,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",
@@ -2972,8 +2973,9 @@
       "link": true
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.1.2",
+      "version": "1.2.0",
-      "license": "BSD-3-Clause"
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
     },
     "node_modules/@lit/reactive-element": {
       "version": "1.4.2",
@@ -3309,6 +3311,51 @@
         "polyfills-loader": "^1.7.5"
       }
     },
+    "node_modules/@open-wc/scoped-elements": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-3.0.5.tgz",
+      "integrity": "sha512-q4U+hFTQQRyorJILOpmBm6PY2hgjCnQe214nXJNjbJMQ9EvT55oyZ7C8BY5aFYJkytUyBoawlMpZt4F2xjdzHw==",
+      "dependencies": {
+        "@open-wc/dedupe-mixin": "^1.4.0",
+        "lit": "^3.0.0"
+      }
+    },
+    "node_modules/@open-wc/scoped-elements/node_modules/@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
+    "node_modules/@open-wc/scoped-elements/node_modules/lit": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.2.tgz",
+      "integrity": "sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==",
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/@open-wc/scoped-elements/node_modules/lit-element": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
+      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/@open-wc/scoped-elements/node_modules/lit-html": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
+      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/@open-wc/semantic-dom-diff": {
       "version": "0.19.7",
       "dev": true,
@@ -21268,11 +21315,6 @@
       "resolved": "https://registry.npmjs.org/@bundled-es-modules/message-format/-/message-format-6.2.4.tgz",
       "integrity": "sha512-NBaIEUCzSjLZjrsmSOh8PJLqQjSpXVuekIOuUT8tt4N/FdtAavWsC1YinIqIrbRnkBqV90OxgKzsxhFCzETQBw=="
     },
-    "packages/ui/node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
-      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
-    },
     "packages/ui/node_modules/@lit/reactive-element": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
@@ -21281,15 +21323,6 @@
         "@lit-labs/ssr-dom-shim": "^1.2.0"
       }
     },
-    "packages/ui/node_modules/@open-wc/scoped-elements": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-3.0.5.tgz",
-      "integrity": "sha512-q4U+hFTQQRyorJILOpmBm6PY2hgjCnQe214nXJNjbJMQ9EvT55oyZ7C8BY5aFYJkytUyBoawlMpZt4F2xjdzHw==",
-      "dependencies": {
-        "@open-wc/dedupe-mixin": "^1.4.0",
-        "lit": "^3.0.0"
-      }
-    },
     "packages/ui/node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -23474,11 +23507,6 @@
           "resolved": "https://registry.npmjs.org/@bundled-es-modules/message-format/-/message-format-6.2.4.tgz",
           "integrity": "sha512-NBaIEUCzSjLZjrsmSOh8PJLqQjSpXVuekIOuUT8tt4N/FdtAavWsC1YinIqIrbRnkBqV90OxgKzsxhFCzETQBw=="
         },
-        "@lit-labs/ssr-dom-shim": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
-          "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
-        },
         "@lit/reactive-element": {
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
@@ -23487,15 +23515,6 @@
             "@lit-labs/ssr-dom-shim": "^1.2.0"
           }
         },
-        "@open-wc/scoped-elements": {
-          "version": "3.0.5",
-          "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-3.0.5.tgz",
-          "integrity": "sha512-q4U+hFTQQRyorJILOpmBm6PY2hgjCnQe214nXJNjbJMQ9EvT55oyZ7C8BY5aFYJkytUyBoawlMpZt4F2xjdzHw==",
-          "requires": {
-            "@open-wc/dedupe-mixin": "^1.4.0",
-            "lit": "^3.0.0"
-          }
-        },
         "@popperjs/core": {
           "version": "2.11.8",
           "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -23532,7 +23551,9 @@
       }
     },
     "@lit-labs/ssr-dom-shim": {
-      "version": "1.1.2"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
     },
     "@lit/reactive-element": {
       "version": "1.4.2"
@@ -23816,6 +23837,53 @@
         "polyfills-loader": "^1.7.5"
       }
     },
+    "@open-wc/scoped-elements": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@open-wc/scoped-elements/-/scoped-elements-3.0.5.tgz",
+      "integrity": "sha512-q4U+hFTQQRyorJILOpmBm6PY2hgjCnQe214nXJNjbJMQ9EvT55oyZ7C8BY5aFYJkytUyBoawlMpZt4F2xjdzHw==",
+      "requires": {
+        "@open-wc/dedupe-mixin": "^1.4.0",
+        "lit": "^3.0.0"
+      },
+      "dependencies": {
+        "@lit/reactive-element": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+          "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+          "requires": {
+            "@lit-labs/ssr-dom-shim": "^1.2.0"
+          }
+        },
+        "lit": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.2.tgz",
+          "integrity": "sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==",
+          "requires": {
+            "@lit/reactive-element": "^2.0.4",
+            "lit-element": "^4.0.4",
+            "lit-html": "^3.1.2"
+          }
+        },
+        "lit-element": {
+          "version": "4.0.4",
+          "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
+          "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
+          "requires": {
+            "@lit-labs/ssr-dom-shim": "^1.2.0",
+            "@lit/reactive-element": "^2.0.4",
+            "lit-html": "^3.1.2"
+          }
+        },
+        "lit-html": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
+          "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+          "requires": {
+            "@types/trusted-types": "^2.0.2"
+          }
+        }
+      }
+    },
     "@open-wc/semantic-dom-diff": {
       "version": "0.19.7",
       "dev": true,

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",

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();
-      });
-    }
   }
 
   /**

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,
             },
           }),
         );

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;