ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
okadurin 2024-04-15 11:18:37 +02:00
parent a393a9829c
commit ac783460aa
7 changed files with 110 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/wise-lemons-hug.md Normal file
View file

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

1
docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js
View file

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

130
package-lock.json generated
View file

@ -21,6 +21,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",
@ -2974,8 +2975,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",
@ -3311,6 +3313,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,
@ -21267,11 +21314,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",
@ -21280,15 +21322,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",
@ -23473,11 +23506,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",
@ -23486,15 +23514,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",
@ -23531,7 +23550,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"
@ -23815,6 +23836,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,

1
package.json
View file

@ -49,6 +49,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",

14
packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
View file

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

2
packages/ui/components/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
View file

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

1
packages/ui/components/input-tel-dropdown/types/index.ts
View file

@ -36,6 +36,7 @@ export type TemplateDataForDropdownInputTel = {
};
labels: { selectCountry: string };
};
input: HTMLInputElement;
};
data: {
activeRegion: string | undefined;