ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(select-rich): make readonly work

Browse source
This commit is contained in:
Joren Broekema 2019-10-11 15:31:38 +02:00 committed by Thomas Allmer
parent c0616b9e70
commit 6a15ba1c80
3 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/select-rich/src/LionSelectRich.js
View file

@ -511,7 +511,7 @@ export class LionSelectRich extends OverlayMixin(
__setupInvokerNodeEventListener() {
this.__invokerOnClick = () => {
if (!this.disabled) {
if (!this.disabled && !this.readOnly) {
this._overlayCtrl.toggle();
}
};

17
packages/select-rich/stories/index.stories.js
View file

@ -57,6 +57,23 @@ storiesOf('Forms|Select Rich', module)
</div>
`,
)
.add(
'Read-only prefilled',
() => html`
<style>
${selectRichDemoStyle}
</style>
<div class="demo-area">
<lion-select-rich label="Read-only select" readonly name="color">
<lion-options slot="input">
<lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
<lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
<lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
</lion-options>
</lion-select-rich>
</div>
`,
)
.add(
'Disabled',
() => html`

28
packages/select-rich/test/lion-select-rich.test.js
View file

@ -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`
<lion-select-rich readonly>
<lion-options slot="input">
<lion-option .choiceValue=${10}>Item 1</lion-option>
<lion-option .choiceValue=${20} checked>Item 2</lion-option>
</lion-options>
</lion-select-rich>
`);
const elDisabled = await fixture(html`
<lion-select-rich disabled>
<lion-options slot="input">
<lion-option .choiceValue=${10}>Item 1</lion-option>
<lion-option .choiceValue=${20} checked>Item 2</lion-option>
</lion-options>
</lion-select-rich>
`);
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', () => {