diff --git a/.changeset/swift-seals-deny.md b/.changeset/swift-seals-deny.md new file mode 100644 index 000000000..0e9ca2a17 --- /dev/null +++ b/.changeset/swift-seals-deny.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[select-rich] set focusableNode correctly so focused and focused-visible attributes are set when invoker gets focus diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js index 7a7722fdb..4681eb636 100644 --- a/packages/ui/components/select-rich/src/LionSelectRich.js +++ b/packages/ui/components/select-rich/src/LionSelectRich.js @@ -85,6 +85,15 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L ); } + /** + * @protected + * @configure FocusMixin + */ + // @ts-ignore + get _focusableNode() { + return this._invokerNode; + } + /** * @configure ListboxMixin * @protected diff --git a/packages/ui/components/select-rich/test/lion-select-rich.test.js b/packages/ui/components/select-rich/test/lion-select-rich.test.js index c57c58f3f..cd6d2a77b 100644 --- a/packages/ui/components/select-rich/test/lion-select-rich.test.js +++ b/packages/ui/components/select-rich/test/lion-select-rich.test.js @@ -49,10 +49,21 @@ describe('lion-select-rich', () => { expect(document.activeElement === document.body).to.be.true; const { _labelNode, _invokerNode } = getSelectRichMembers(el); _labelNode.click(); - expect(document.activeElement === _invokerNode).to.be.true; }); + it('has an attribute focused when focused', async () => { + const el = await fixture(html` `); + + el.focus(); + await el.updateComplete; + expect(el.hasAttribute('focused')).to.be.true; + + el.blur(); + await el.updateComplete; + expect(el.hasAttribute('focused')).to.be.false; + }); + it('checks the first enabled option', async () => { const el = await fixture(html`