feat(select-rich): added signleoption functionality

This commit is contained in:
palash2601 2020-04-10 11:20:35 +02:00
parent 41ac853d42
commit 7c3741854d
3 changed files with 41 additions and 3 deletions

View file

@ -28,7 +28,7 @@ export class LionSelectInvoker extends LionButton {
type: Object, 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 * this should be reflected in the invoker as well
*/ */
readOnly: { readOnly: {
@ -36,6 +36,15 @@ export class LionSelectInvoker extends LionButton {
reflect: true, reflect: true,
attribute: 'readonly', 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',
},
}; };
} }

View file

@ -219,6 +219,10 @@ export class LionSelectRich extends ScopedElementsMixin(
firstUpdated(changedProperties) { firstUpdated(changedProperties) {
super.firstUpdated(changedProperties); super.firstUpdated(changedProperties);
if (this._listboxNode.childElementCount === 1) {
this.singleOption = true;
this._invokerNode.singleOption = true;
}
this._overlaySetupComplete.then(() => { this._overlaySetupComplete.then(() => {
this.__setupOverlay(); this.__setupOverlay();
@ -572,7 +576,7 @@ export class LionSelectRich extends ScopedElementsMixin(
__setupInvokerNodeEventListener() { __setupInvokerNodeEventListener() {
this.__invokerOnClick = () => { this.__invokerOnClick = () => {
if (!this.disabled && !this.readOnly) { if (!this.disabled && !this.readOnly && !this.singleOption) {
this._overlayCtrl.toggle(); this._overlayCtrl.toggle();
} }
}; };

View file

@ -274,6 +274,19 @@ describe('lion-select-rich', () => {
expect(el.hasAttribute('readonly')).to.be.true; expect(el.hasAttribute('readonly')).to.be.true;
expect(el._invokerNode.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`
<lion-select-rich>
<lion-options slot="input">
<lion-option .choiceValue=${10}>Item 1</lion-option>
</lion-options>
</lion-select-rich>
`);
expect(el.singleOption).to.be.true;
expect(el._invokerNode.hasAttribute('singleOption')).to.be.true;
});
}); });
describe('overlay', () => { describe('overlay', () => {
@ -351,7 +364,7 @@ describe('lion-select-rich', () => {
expect(options[1].checked).to.be.true; 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` const elReadOnly = await fixture(html`
<lion-select-rich readonly> <lion-select-rich readonly>
<lion-options slot="input"> <lion-options slot="input">
@ -370,6 +383,14 @@ describe('lion-select-rich', () => {
</lion-select-rich> </lion-select-rich>
`); `);
const elSingleoption = await fixture(html`
<lion-select-rich>
<lion-options slot="input">
<lion-option .choiceValue=${10}>Item 1</lion-option>
</lion-options>
</lion-select-rich>
`);
elReadOnly._invokerNode.click(); elReadOnly._invokerNode.click();
await elReadOnly.updateComplete; await elReadOnly.updateComplete;
expect(elReadOnly.opened).to.be.false; expect(elReadOnly.opened).to.be.false;
@ -377,6 +398,10 @@ describe('lion-select-rich', () => {
elDisabled._invokerNode.click(); elDisabled._invokerNode.click();
await elDisabled.updateComplete; await elDisabled.updateComplete;
expect(elDisabled.opened).to.be.false; 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 () => { it('should override the inheritsWidth prop when no default selected feature is used', async () => {