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

fix(field): fix form registration in Edge

Browse source
This commit is contained in:
Mikhail Bashkirov 2019-05-28 23:39:26 +02:00
parent 98c7444569
commit 7e1a7ef95a
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/field/src/FormControlMixin.js
View file

@ -145,7 +145,7 @@ export const FormControlMixin = dedupeMixin(
* will requires a `await nextFrame()` in tests * will requires a `await nextFrame()` in tests
*/ */
_registerFormElement() { _registerFormElement() {
requestAnimationFrame(() => { this.updateComplete.then(() => {
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('form-element-register', { new CustomEvent('form-element-register', {
detail: { element: this }, detail: { element: this },
@ -164,7 +164,7 @@ export const FormControlMixin = dedupeMixin(
* @see {@link this._registerFormElement} * @see {@link this._registerFormElement}
*/ */
_requestParentFormGroupUpdateOfResetModelValue() { _requestParentFormGroupUpdateOfResetModelValue() {
requestAnimationFrame(() => { this.updateComplete.then(() => {
if (this.__parentFormGroup) { if (this.__parentFormGroup) {
this.__parentFormGroup._updateResetModelValue(); this.__parentFormGroup._updateResetModelValue();
} }

14
packages/fieldset/test/lion-fieldset.test.js
View file

@ -518,7 +518,8 @@ describe('<lion-fieldset>', () => {
<lion-input id="firstName" name="firstName" .modelValue="${'Foo'}"></lion-input> <lion-input id="firstName" name="firstName" .modelValue="${'Foo'}"></lion-input>
</lion-fieldset> </lion-fieldset>
`); `);
await nextFrame(); await el.querySelector('lion-input').updateComplete;
const input = el.querySelector('#firstName'); const input = el.querySelector('#firstName');
input.modelValue = 'Bar'; input.modelValue = 'Bar';
@ -536,7 +537,8 @@ describe('<lion-fieldset>', () => {
<lion-input id="firstName" name="firstName[]" .modelValue="${'Foo'}"></lion-input> <lion-input id="firstName" name="firstName[]" .modelValue="${'Foo'}"></lion-input>
</lion-fieldset> </lion-fieldset>
`); `);
await nextFrame(); await el.querySelector('lion-input').updateComplete;
const input = el.querySelector('#firstName'); const input = el.querySelector('#firstName');
input.modelValue = 'Bar'; input.modelValue = 'Bar';
@ -556,9 +558,11 @@ describe('<lion-fieldset>', () => {
</lion-fieldset> </lion-fieldset>
</lion-fieldset> </lion-fieldset>
`); `);
// 2 times as we are nested here await Promise.all([
await nextFrame(); el.querySelector('lion-fieldset').updateComplete,
await nextFrame(); el.querySelector('lion-input').updateComplete,
]);
const input = el.querySelector('#firstName'); const input = el.querySelector('#firstName');
const nestedFieldset = el.querySelector('#name'); const nestedFieldset = el.querySelector('#name');