diff --git a/.changeset/wise-lemons-hug.md b/.changeset/wise-lemons-hug.md new file mode 100644 index 0000000000..dc7a78f8be --- /dev/null +++ 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 index 93c393f4da..8c32d01cc1 100644 --- 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 index 65f165e6ef..e5f51db798 100644 --- a/package-lock.json +++ b/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", - "license": "BSD-3-Clause" + "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==" }, "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, diff --git a/package.json b/package.json index 6ff046687d..d269aef607 100644 --- 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 index 357f137f96..c1dc16e4c2 100644 --- 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 index 4e79ae6579..8701fc5188 100644 --- 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 index 042f54750c..b8b4d58643 100644 --- 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;