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