diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index ec13abe39..1eb11b9cb 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/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();
}
};
diff --git a/packages/select-rich/stories/index.stories.js b/packages/select-rich/stories/index.stories.js
index 1ade3e10e..07b8c9853 100644
--- a/packages/select-rich/stories/index.stories.js
+++ b/packages/select-rich/stories/index.stories.js
@@ -57,6 +57,23 @@ storiesOf('Forms|Select Rich', module)
`,
)
+ .add(
+ 'Read-only prefilled',
+ () => html`
+
+
+
+
+ Red
+ Hotpink
+ Teal
+
+
+
+ `,
+ )
.add(
'Disabled',
() => html`
diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js
index 55ee4fcaf..ea9a8a616 100644
--- a/packages/select-rich/test/lion-select-rich.test.js
+++ b/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`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+
+ const elDisabled = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+
+ 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', () => {