Merge pull request #678 from palash2601/feat/select-rich-singleoption

feat(select-rich): added signleoption functionality

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',
+      },
     };
   }
 

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

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`
+        <lion-select-rich>
+          <lion-options slot="input">
+            <lion-option .choiceValue=${10}>Item 1</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      `);
+
+      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`
         <lion-select-rich readonly>
           <lion-options slot="input">
@@ -370,6 +383,14 @@ describe('lion-select-rich', () => {
         </lion-select-rich>
       `);
 
+      const elSingleoption = await fixture(html`
+        <lion-select-rich>
+          <lion-options slot="input">
+            <lion-option .choiceValue=${10}>Item 1</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      `);
+
       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 () => {