diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js index aec171e1c..8dcbbe54f 100644 --- a/packages/select-rich/src/LionSelectInvoker.js +++ b/packages/select-rich/src/LionSelectInvoker.js @@ -43,7 +43,7 @@ export class LionSelectInvoker extends LionButton { singleOption: { type: Boolean, reflect: true, - attribute: 'singleOption', + attribute: 'single-option', }, }; } @@ -99,7 +99,11 @@ export class LionSelectInvoker extends LionButton { // eslint-disable-next-line class-methods-use-this _afterTemplate() { return html` - + ${!this.singleOption + ? html` + + ` + : ''} `; } } diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index 32050f404..b6bf62456 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -219,10 +219,6 @@ export class LionSelectRich extends ScopedElementsMixin( firstUpdated(changedProperties) { super.firstUpdated(changedProperties); - if (this._listboxNode.childElementCount === 1) { - this.singleOption = true; - this._invokerNode.singleOption = true; - } this._overlaySetupComplete.then(() => { this.__setupOverlay(); @@ -281,6 +277,11 @@ export class LionSelectRich extends ScopedElementsMixin( updated(changedProperties) { super.updated(changedProperties); + if (this.formElements.length === 1) { + this.singleOption = true; + this._invokerNode.singleOption = true; + } + if (changedProperties.has('disabled')) { if (this.disabled) { this._invokerNode.makeRequestToBeDisabled(); diff --git a/packages/select-rich/stories/index.stories.mdx b/packages/select-rich/stories/index.stories.mdx index 46b94bc4b..e98c62883 100644 --- a/packages/select-rich/stories/index.stories.mdx +++ b/packages/select-rich/stories/index.stories.mdx @@ -506,6 +506,28 @@ Both methods work with the `Required` validator. > but subclassers can easily override this in their extension, by the overriding `_noSelectionTemplate()` method. +### Single Option + +If there is a single option rendered, then `singleOption` property is set to `true` on `lion-select-rich` and invoker as well. Invoker also gets `single-option` which can be used to having desired templating and styling. As in here the arrow is not displayed for single option + + + {html` + + + Red + + + `} + + +```html + + + Red + + +``` + ### Custom Invoker diff --git a/packages/select-rich/test/lion-select-invoker.test.js b/packages/select-rich/test/lion-select-invoker.test.js index 526470252..4f1df75f4 100644 --- a/packages/select-rich/test/lion-select-invoker.test.js +++ b/packages/select-rich/test/lion-select-invoker.test.js @@ -48,6 +48,22 @@ describe('lion-select-invoker', () => { expect(el.getAttribute('tabindex')).to.equal('0'); }); + it('should not render after slot when singleOption is true', async () => { + const el = await fixture(html` + + `); + + expect(el.shadowRoot.querySelector('slot[name="after"]')).to.not.exist; + }); + + it('should render after slot when singleOption is not true', async () => { + const el = await fixture(html` + + `); + + expect(el.shadowRoot.querySelector('slot[name="after"]')).to.exist; + }); + describe('Subclassers', () => { it('supports a custom _contentTemplate', async () => { const myTag = defineCE( diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index 185cec565..b6e14a2b9 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -285,7 +285,7 @@ describe('lion-select-rich', () => { `); expect(el.singleOption).to.be.true; - expect(el._invokerNode.hasAttribute('singleOption')).to.be.true; + expect(el._invokerNode.hasAttribute('single-option')).to.be.true; }); }); @@ -429,6 +429,29 @@ describe('lion-select-rich', () => { expect(el._overlayCtrl.inheritsReferenceWidth).to.equal('full'); }); + + it('should set singleOption to true when options change dynamically to 1 option', async () => { + const elSingleoption = await fixture(html` + + + Item 1 + Item 2 + + + `); + + elSingleoption._invokerNode.click(); + await elSingleoption.updateComplete; + expect(elSingleoption.singleOption).to.be.undefined; + + const optionELm = elSingleoption.querySelectorAll('lion-option')[0]; + optionELm.parentNode.removeChild(optionELm); + elSingleoption.requestUpdate(); + + elSingleoption._invokerNode.click(); + await elSingleoption.updateComplete; + expect(elSingleoption.singleOption).to.be.true; + }); }); describe('interaction-mode', () => {