From 7c3741854d75d841a613717761c433cb868f5c49 Mon Sep 17 00:00:00 2001 From: palash2601 Date: Fri, 10 Apr 2020 11:20:35 +0200 Subject: [PATCH] feat(select-rich): added signleoption functionality --- packages/select-rich/src/LionSelectInvoker.js | 11 +++++++- packages/select-rich/src/LionSelectRich.js | 6 ++++- .../select-rich/test/lion-select-rich.test.js | 27 ++++++++++++++++++- 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js index 46fa71b4b..aec171e1c 100644 --- a/packages/select-rich/src/LionSelectInvoker.js +++ b/packages/select-rich/src/LionSelectInvoker.js @@ -28,7 +28,7 @@ export class LionSelectInvoker extends LionButton { type: Object, }, /** - * @desc When the connected LionSelectRich insteance is readOnly, + * @desc When the connected LionSelectRich instance is readOnly, * this should be reflected in the invoker as well */ readOnly: { @@ -36,6 +36,15 @@ export class LionSelectInvoker extends LionButton { reflect: true, attribute: 'readonly', }, + /** + * @desc When the connected LionSelectRich instance has only one option, + * this should be reflected in the invoker as well + */ + singleOption: { + type: Boolean, + reflect: true, + attribute: 'singleOption', + }, }; } diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index 47a20bc0e..32050f404 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -219,6 +219,10 @@ 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(); @@ -572,7 +576,7 @@ export class LionSelectRich extends ScopedElementsMixin( __setupInvokerNodeEventListener() { this.__invokerOnClick = () => { - if (!this.disabled && !this.readOnly) { + if (!this.disabled && !this.readOnly && !this.singleOption) { this._overlayCtrl.toggle(); } }; diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index a57694c58..185cec565 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -274,6 +274,19 @@ describe('lion-select-rich', () => { expect(el.hasAttribute('readonly')).to.be.true; expect(el._invokerNode.hasAttribute('readonly')).to.be.true; }); + + it('delegates singleOption to the invoker', async () => { + const el = await fixture(html` + + + Item 1 + + + `); + + expect(el.singleOption).to.be.true; + expect(el._invokerNode.hasAttribute('singleOption')).to.be.true; + }); }); describe('overlay', () => { @@ -351,7 +364,7 @@ describe('lion-select-rich', () => { expect(options[1].checked).to.be.true; }); - it('stays closed on click if it is disabled or readonly', async () => { + it('stays closed on click if it is disabled or readonly or has a single option', async () => { const elReadOnly = await fixture(html` @@ -370,6 +383,14 @@ describe('lion-select-rich', () => { `); + const elSingleoption = await fixture(html` + + + Item 1 + + + `); + elReadOnly._invokerNode.click(); await elReadOnly.updateComplete; expect(elReadOnly.opened).to.be.false; @@ -377,6 +398,10 @@ describe('lion-select-rich', () => { elDisabled._invokerNode.click(); await elDisabled.updateComplete; expect(elDisabled.opened).to.be.false; + + elSingleoption._invokerNode.click(); + await elSingleoption.updateComplete; + expect(elSingleoption.opened).to.be.false; }); it('should override the inheritsWidth prop when no default selected feature is used', async () => {