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', () => {