diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js
index aec171e1c..8dcbbe54f 100644
--- a/packages/select-rich/src/LionSelectInvoker.js
+++ b/packages/select-rich/src/LionSelectInvoker.js
@@ -43,7 +43,7 @@ export class LionSelectInvoker extends LionButton {
singleOption: {
type: Boolean,
reflect: true,
- attribute: 'singleOption',
+ attribute: 'single-option',
},
};
}
@@ -99,7 +99,11 @@ export class LionSelectInvoker extends LionButton {
// eslint-disable-next-line class-methods-use-this
_afterTemplate() {
return html`
-
+ ${!this.singleOption
+ ? html`
+
+ `
+ : ''}
`;
}
}
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index 32050f404..b6bf62456 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -219,10 +219,6 @@ 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();
@@ -281,6 +277,11 @@ export class LionSelectRich extends ScopedElementsMixin(
updated(changedProperties) {
super.updated(changedProperties);
+ if (this.formElements.length === 1) {
+ this.singleOption = true;
+ this._invokerNode.singleOption = true;
+ }
+
if (changedProperties.has('disabled')) {
if (this.disabled) {
this._invokerNode.makeRequestToBeDisabled();
diff --git a/packages/select-rich/stories/index.stories.mdx b/packages/select-rich/stories/index.stories.mdx
index 46b94bc4b..e98c62883 100644
--- a/packages/select-rich/stories/index.stories.mdx
+++ b/packages/select-rich/stories/index.stories.mdx
@@ -506,6 +506,28 @@ Both methods work with the `Required` validator.
> but subclassers can easily override this in their extension, by the overriding `_noSelectionTemplate()` method.
+### Single Option
+
+If there is a single option rendered, then `singleOption` property is set to `true` on `lion-select-rich` and invoker as well. Invoker also gets `single-option` which can be used to having desired templating and styling. As in here the arrow is not displayed for single option
+
+
+ {html`
+
+
+ Red
+
+
+ `}
+
+
+```html
+
+
+ Red
+
+
+```
+
### Custom Invoker
diff --git a/packages/select-rich/test/lion-select-invoker.test.js b/packages/select-rich/test/lion-select-invoker.test.js
index 526470252..4f1df75f4 100644
--- a/packages/select-rich/test/lion-select-invoker.test.js
+++ b/packages/select-rich/test/lion-select-invoker.test.js
@@ -48,6 +48,22 @@ describe('lion-select-invoker', () => {
expect(el.getAttribute('tabindex')).to.equal('0');
});
+ it('should not render after slot when singleOption is true', async () => {
+ const el = await fixture(html`
+
+ `);
+
+ expect(el.shadowRoot.querySelector('slot[name="after"]')).to.not.exist;
+ });
+
+ it('should render after slot when singleOption is not true', async () => {
+ const el = await fixture(html`
+
+ `);
+
+ expect(el.shadowRoot.querySelector('slot[name="after"]')).to.exist;
+ });
+
describe('Subclassers', () => {
it('supports a custom _contentTemplate', async () => {
const myTag = defineCE(
diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js
index 185cec565..b6e14a2b9 100644
--- a/packages/select-rich/test/lion-select-rich.test.js
+++ b/packages/select-rich/test/lion-select-rich.test.js
@@ -285,7 +285,7 @@ describe('lion-select-rich', () => {
`);
expect(el.singleOption).to.be.true;
- expect(el._invokerNode.hasAttribute('singleOption')).to.be.true;
+ expect(el._invokerNode.hasAttribute('single-option')).to.be.true;
});
});
@@ -429,6 +429,29 @@ describe('lion-select-rich', () => {
expect(el._overlayCtrl.inheritsReferenceWidth).to.equal('full');
});
+
+ it('should set singleOption to true when options change dynamically to 1 option', async () => {
+ const elSingleoption = await fixture(html`
+
+
+ Item 1
+ Item 2
+
+
+ `);
+
+ elSingleoption._invokerNode.click();
+ await elSingleoption.updateComplete;
+ expect(elSingleoption.singleOption).to.be.undefined;
+
+ const optionELm = elSingleoption.querySelectorAll('lion-option')[0];
+ optionELm.parentNode.removeChild(optionELm);
+ elSingleoption.requestUpdate();
+
+ elSingleoption._invokerNode.click();
+ await elSingleoption.updateComplete;
+ expect(elSingleoption.singleOption).to.be.true;
+ });
});
describe('interaction-mode', () => {