From 188fe5077094b7d5d1fe270de4eb627b86142abd Mon Sep 17 00:00:00 2001
From: jorenbroekema <joren.broekema@gmail.com>
Date: Wed, 14 Oct 2020 12:13:55 +0200
Subject: [PATCH] fix(form-core): fire initial modelValue lit update after
 registration

---
 .../src/choice-group/ChoiceGroupMixin.js      |  2 +-
 .../listbox/test-suites/ListboxMixin.suite.js | 57 +++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/packages/form-core/src/choice-group/ChoiceGroupMixin.js b/packages/form-core/src/choice-group/ChoiceGroupMixin.js
index 2212a0676..f165833d0 100644
--- a/packages/form-core/src/choice-group/ChoiceGroupMixin.js
+++ b/packages/form-core/src/choice-group/ChoiceGroupMixin.js
@@ -49,8 +49,8 @@ const ChoiceGroupMixinImplementation = superclass =>
         this.__isInitialModelValue = false;
         this.registrationComplete.then(() => {
           this._setCheckedElements(value, checkCondition);
+          this.requestUpdate('modelValue');
         });
-        this.requestUpdate('modelValue');
       } else {
         this._setCheckedElements(value, checkCondition);
         this.requestUpdate('modelValue');
diff --git a/packages/listbox/test-suites/ListboxMixin.suite.js b/packages/listbox/test-suites/ListboxMixin.suite.js
index 858ca2a51..a30ff4010 100644
--- a/packages/listbox/test-suites/ListboxMixin.suite.js
+++ b/packages/listbox/test-suites/ListboxMixin.suite.js
@@ -1,4 +1,5 @@
 import { Required } from '@lion/form-core';
+import sinon from 'sinon';
 import { expect, html, fixture as _fixture, unsafeStatic } from '@open-wc/testing';
 import { LionOptions } from '@lion/listbox';
 import '@lion/listbox/lion-option.js';
@@ -109,6 +110,62 @@ export function runListboxMixinSuite(customConfig = {}) {
         expect(el.formElements[2].checked).to.be.true;
       });
 
+      it('requests update for modelValue when checkedIndex changes', async () => {
+        const el = await fixture(html`
+          <${tag} name="gender" .modelValue=${'other'}>
+            <${optionTag} .choiceValue=${'male'}></${optionTag}>
+            <${optionTag} .choiceValue=${'female'}></${optionTag}>
+            <${optionTag} .choiceValue=${'other'}></${optionTag}>
+          </${tag}>
+        `);
+        expect(el.checkedIndex).to.equal(2);
+        const spy = sinon.spy(el, 'requestUpdate');
+        el.setCheckedIndex(1);
+        expect(spy).to.have.been.calledWith('modelValue', 'other');
+      });
+
+      it('requests update for modelValue after click', async () => {
+        const el = await fixture(html`
+          <${tag} name="gender" .modelValue=${'other'}>
+            <${optionTag} .choiceValue=${'male'}></${optionTag}>
+            <${optionTag} .choiceValue=${'female'}></${optionTag}>
+            <${optionTag} .choiceValue=${'other'}></${optionTag}>
+          </${tag}>
+        `);
+        expect(el.checkedIndex).to.equal(2);
+        const spy = sinon.spy(el, 'requestUpdate');
+        el.formElements[0].click();
+        expect(spy).to.have.been.calledWith('modelValue', 'other');
+      });
+
+      it('requests update for modelValue when checkedIndex changes for multiple choice', async () => {
+        const el = await fixture(html`
+          <${tag} name="gender" multiple-choice .modelValue=${['other']}>
+            <${optionTag} .choiceValue=${'male'}></${optionTag}>
+            <${optionTag} .choiceValue=${'female'}></${optionTag}>
+            <${optionTag} .choiceValue=${'other'}></${optionTag}>
+          </${tag}>
+        `);
+        expect(el.checkedIndex).to.eql([2]);
+        const spy = sinon.spy(el, 'requestUpdate');
+        el.setCheckedIndex(1);
+        expect(spy).to.have.been.calledWith('modelValue', sinon.match.array.deepEquals(['other']));
+      });
+
+      it('requests update for modelValue after click for multiple choice', async () => {
+        const el = await fixture(html`
+          <${tag} name="gender" multiple-choice .modelValue=${['other']}>
+            <${optionTag} .choiceValue=${'male'}></${optionTag}>
+            <${optionTag} .choiceValue=${'female'}></${optionTag}>
+            <${optionTag} .choiceValue=${'other'}></${optionTag}>
+          </${tag}>
+        `);
+        expect(el.checkedIndex).to.eql([2]);
+        const spy = sinon.spy(el, 'requestUpdate');
+        el.formElements[0].click();
+        expect(spy).to.have.been.calledWith('modelValue', sinon.match.array.deepEquals(['other']));
+      });
+
       it(`has a fieldName based on the label`, async () => {
         const el1 = await fixture(html`
         <${tag} label="foo"></${tag}>