fix(listbox): add reset function

.changeset/late-pugs-jog.md

@@ -0,0 +1,5 @@
+---
+'@lion/form-core': patch
+---
+
+On value change uncheck all formElements that do not meet the requested condition

.changeset/slimy-windows-sing.md

@@ -0,0 +1,5 @@
+---
+'@lion/listbox': minor
+---
+
+Add reset function to listbox and all extentions

packages/form-core/src/choice-group/ChoiceGroupMixin.js

@@ -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;
         }
       }
     }

packages/form-integrations/docs/15-features-overview.md

@@ -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-select-rich>
         <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
           <select slot="input">

packages/listbox/src/ListboxMixin.js

@@ -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.

packages/listbox/test-suites/ListboxMixin.suite.js

@@ -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', () => {