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

fix(select-rich): add serializedValue setter due to getter override

Browse source
This commit is contained in:
Joren Broekema 2020-07-22 13:08:57 +02:00
parent 021fcdada4
commit 23f61eb813
2 changed files with 26 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -159,6 +159,12 @@ export class LionSelectRich extends ScopedElementsMixin(
return this.modelValue;
}
// Duplicating from FormGroupMixin, because you cannot independently inherit/override getter + setter.
// If you override one, gotta override the other, they go in pairs.
set serializedValue(value) {
super.serializedValue = value;
}
get checkedIndex() {
let checkedIndex = -1;
this.formElements.forEach((option, i) => {

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

@ -205,7 +205,7 @@ describe('lion-select-rich', () => {
<lion-select-rich id="color" name="color" label="Favorite color" has-no-default-selected>
<lion-options slot="input">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
<lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
</lion-options>
</lion-select-rich>
@ -215,6 +215,25 @@ describe('lion-select-rich', () => {
expect(el.modelValue).to.equal('');
});
it('supports changing the selection through serializedValue setter', async () => {
const el = await fixture(html`
<lion-select-rich id="color" name="color" label="Favorite color">
<lion-options slot="input">
<lion-option .choiceValue=${'red'}>Red</lion-option>
<lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
</lion-options>
</lion-select-rich>
`);
expect(el.checkedIndex).to.equal(0);
expect(el.serializedValue).to.equal('red');
el.serializedValue = 'hotpink';
expect(el.checkedIndex).to.equal(1);
expect(el.serializedValue).to.equal('hotpink');
});
describe('Invoker', () => {
it('generates an lion-select-invoker if no invoker is provided', async () => {
const el = await fixture(html`