fix(listbox): add reset function
This commit is contained in:
qa46hx
parent
c03ebde5b5
commit
d5faa459f8
6 changed files with 102 additions and 7 deletions
5
.changeset/late-pugs-jog.md
Normal file
5
.changeset/late-pugs-jog.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@lion/form-core': patch
|
||||
---
|
||||
|
||||
On value change uncheck all formElements that do not meet the requested condition
|
||||
5
.changeset/slimy-windows-sing.md
Normal file
5
.changeset/slimy-windows-sing.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@lion/listbox': minor
|
||||
---
|
||||
|
||||
Add reset function to listbox and all extentions
|
||||
|
|
@ -268,6 +268,8 @@ const ChoiceGroupMixinImplementation = superclass =>
|
|||
} else if (check(this.formElements[i], value)) {
|
||||
// Allows checking against custom values e.g. formattedValue or serializedValue
|
||||
this.formElements[i].checked = true;
|
||||
} else {
|
||||
this.formElements[i].checked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ For usage and installation please see the appropriate packages.
|
|||
import { html } from 'lit-html';
|
||||
import '@lion/checkbox-group/lion-checkbox-group.js';
|
||||
import '@lion/checkbox-group/lion-checkbox.js';
|
||||
import '@lion/combobox/lion-combobox.js';
|
||||
import '@lion/fieldset/lion-fieldset.js';
|
||||
import '@lion/form/lion-form.js';
|
||||
import '@lion/input-amount/lion-input-amount.js';
|
||||
|
|
@ -19,11 +20,12 @@ import '@lion/input-iban/lion-input-iban.js';
|
|||
import '@lion/input-range/lion-input-range.js';
|
||||
import '@lion/input-stepper/lion-input-stepper.js';
|
||||
import '@lion/input/lion-input.js';
|
||||
import '@lion/listbox/lion-listbox.js';
|
||||
import '@lion/listbox/lion-option.js';
|
||||
import '@lion/listbox/lion-options.js';
|
||||
import '@lion/radio-group/lion-radio-group.js';
|
||||
import '@lion/radio-group/lion-radio.js';
|
||||
import '@lion/select/lion-select.js';
|
||||
import '@lion/listbox/lion-option.js';
|
||||
import '@lion/listbox/lion-options.js';
|
||||
import '@lion/select-rich/lion-select-rich.js';
|
||||
import '@lion/textarea/lion-textarea.js';
|
||||
import { MinLength, Required } from '@lion/form-core';
|
||||
|
|
@ -94,12 +96,23 @@ export const main = () => {
|
|||
<lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
|
||||
<lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
|
||||
</lion-radio-group>
|
||||
<lion-listbox name="favoriteFruit" label="Favorite fruit">
|
||||
<lion-option .choiceValue=${'Apple'}>Apple</lion-option>
|
||||
<lion-option checked .choiceValue=${'Banana'}>Banana</lion-option>
|
||||
<lion-option .choiceValue=${'Mango'}>Mango</lion-option>
|
||||
</lion-listbox>
|
||||
<lion-combobox name="favoriteMovie" label="Favorite movie" autocomplete="both">
|
||||
<lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
|
||||
<lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
|
||||
<lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
|
||||
<lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
|
||||
<lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
|
||||
<lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
|
||||
</lion-combobox>
|
||||
<lion-select-rich name="favoriteColor" label="Favorite color">
|
||||
<lion-options slot="input">
|
||||
<lion-option .choiceValue=${'red'}>Red</lion-option>
|
||||
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
|
||||
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
|
||||
</lion-options>
|
||||
<lion-option .choiceValue=${'red'}>Red</lion-option>
|
||||
<lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
|
||||
<lion-option .choiceValue=${'teal'}>Teal</lion-option>
|
||||
</lion-select-rich>
|
||||
<lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
|
||||
<select slot="input">
|
||||
|
|
|
|||
|
|
@ -301,6 +301,10 @@ const ListboxMixinImplementation = superclass =>
|
|||
firstUpdated(changedProperties) {
|
||||
super.firstUpdated(changedProperties);
|
||||
this.__moveOptionsToListboxNode();
|
||||
this.registrationComplete.then(() => {
|
||||
/** @type {any[]} */
|
||||
this._initialModelValue = this.modelValue;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -381,6 +385,17 @@ const ListboxMixinImplementation = superclass =>
|
|||
/* eslint-enable no-param-reassign */
|
||||
}
|
||||
|
||||
resetInteractionState() {
|
||||
super.resetInteractionState();
|
||||
this.submitted = false;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.modelValue = this._initialModelValue;
|
||||
this.activeIndex = -1;
|
||||
this.resetInteractionState();
|
||||
}
|
||||
|
||||
/**
|
||||
* @override ChoiceGroupMixin: in the select disabled options are still going to a possible
|
||||
* value, for example when prefilling or programmatically setting it.
|
||||
|
|
|
|||
|
|
@ -336,6 +336,47 @@ export function runListboxMixinSuite(customConfig = {}) {
|
|||
expect(el.modelValue).to.be.null;
|
||||
});
|
||||
|
||||
it('should reset selected value to initial value', async () => {
|
||||
const el = await fixture(html`
|
||||
<${tag}>
|
||||
<${optionTag} .choiceValue=${'10'}>Item 1</${optionTag}>
|
||||
<${optionTag} .choiceValue=${'20'} checked>Item 2</${optionTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
expect(el.modelValue).to.equal('20');
|
||||
el.setCheckedIndex(0);
|
||||
expect(el.modelValue).to.equal('10');
|
||||
el.reset();
|
||||
expect(el.modelValue).to.equal('20');
|
||||
});
|
||||
|
||||
it('should reset selected value to "Please select account" with has-no-default-selected attribute', async () => {
|
||||
const el = await fixture(html`
|
||||
<${tag} has-no-default-selected>
|
||||
<${optionTag} .choiceValue=${'10'}>Item 1</${optionTag}>
|
||||
<${optionTag} .choiceValue=${'20'}>Item 2</${optionTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
el.setCheckedIndex(1);
|
||||
expect(el.modelValue).to.equal('20');
|
||||
el.reset();
|
||||
expect(el.modelValue).to.equal('');
|
||||
});
|
||||
|
||||
it('should reset selected value to initial values when multiple-choice', async () => {
|
||||
const el = await fixture(html`
|
||||
<${tag} multiple-choice has-no-default-selected>
|
||||
<${optionTag} .choiceValue=${'10'}>Item 1</${optionTag}>
|
||||
<${optionTag} .choiceValue=${'20'} checked>Item 2</${optionTag}>
|
||||
<${optionTag} .choiceValue=${'30'} checked>Item 3</${optionTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
el.setCheckedIndex(2);
|
||||
expect(el.modelValue).to.deep.equal(['20']);
|
||||
el.reset();
|
||||
expect(el.modelValue).to.deep.equal(['20', '30']);
|
||||
});
|
||||
|
||||
it('has an activeIndex', async () => {
|
||||
const el = await fixture(html`
|
||||
<${tag} has-no-default-selected autocomplete="list">
|
||||
|
|
@ -349,6 +390,20 @@ export function runListboxMixinSuite(customConfig = {}) {
|
|||
expect(el.querySelectorAll('lion-option')[0].active).to.be.false;
|
||||
expect(el.activeIndex).to.equal(1);
|
||||
});
|
||||
|
||||
it('should reset activeIndex value', async () => {
|
||||
const el = await fixture(html`
|
||||
<${tag} has-no-default-selected>
|
||||
<${optionTag} .choiceValue=${'10'}>Item 1</${optionTag}>
|
||||
<${optionTag} .choiceValue=${'20'}>Item 2</${optionTag}>
|
||||
</${tag}>
|
||||
`);
|
||||
expect(el.activeIndex).to.equal(-1);
|
||||
el.querySelectorAll('lion-option')[1].active = true;
|
||||
expect(el.activeIndex).to.equal(1);
|
||||
el.reset();
|
||||
expect(el.activeIndex).to.equal(-1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Interactions', () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue