fix(select-rich): make readonly work

Author: Joren Broekema

packages/select-rich/src/LionSelectRich.js

@@ -511,7 +511,7 @@ export class LionSelectRich extends OverlayMixin(
 
   __setupInvokerNodeEventListener() {
     this.__invokerOnClick = () => {
-      if (!this.disabled) {
+      if (!this.disabled && !this.readOnly) {
         this._overlayCtrl.toggle();
       }
     };

packages/select-rich/stories/index.stories.js

@@ -57,6 +57,23 @@ storiesOf('Forms|Select Rich', module)
       </div>
     `,
   )
+  .add(
+    'Read-only prefilled',
+    () => html`
+      <style>
+        ${selectRichDemoStyle}
+      </style>
+      <div class="demo-area">
+        <lion-select-rich label="Read-only select" readonly name="color">
+          <lion-options slot="input">
+            <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
+            <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
+            <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      </div>
+    `,
+  )
   .add(
     'Disabled',
     () => html`

packages/select-rich/test/lion-select-rich.test.js

@@ -159,6 +159,34 @@ describe('lion-select-rich', () => {
       expect(options[1].active).to.be.true;
       expect(options[1].checked).to.be.true;
     });
+
+    it('stays closed on click if it disabled or readonly', async () => {
+      const elReadOnly = await fixture(html`
+        <lion-select-rich readonly>
+          <lion-options slot="input">
+            <lion-option .choiceValue=${10}>Item 1</lion-option>
+            <lion-option .choiceValue=${20} checked>Item 2</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      `);
+
+      const elDisabled = await fixture(html`
+        <lion-select-rich disabled>
+          <lion-options slot="input">
+            <lion-option .choiceValue=${10}>Item 1</lion-option>
+            <lion-option .choiceValue=${20} checked>Item 2</lion-option>
+          </lion-options>
+        </lion-select-rich>
+      `);
+
+      elReadOnly._invokerNode.click();
+      await elReadOnly.updateComplete;
+      expect(elReadOnly.opened).to.be.false;
+
+      elDisabled._invokerNode.click();
+      await elDisabled.updateComplete;
+      expect(elDisabled.opened).to.be.false;
+    });
   });
 
   describe('interaction-mode', () => {