fix(formAssociatedCallback): make sure internals are available when formAssociatedCallback is called

Author: lideen

Diff for: src/utils.ts

@@ -142,7 +142,9 @@ export const initForm = (ref: ICustomElement, form: HTMLFormElement, internals:
 
     /** Call formAssociatedCallback if applicable */
     if (ref.constructor['formAssociated'] && ref.formAssociatedCallback) {
-      ref.formAssociatedCallback.apply(ref, [form]);
+      setTimeout(() => {
+        ref.formAssociatedCallback.apply(ref, [form]);
+      }, 0);
     }
   }
 };

Diff for: test/ElementInternals.test.js

@@ -8,6 +8,7 @@ import {
 import '../dist/index.js';
 
 let callCount = 0;
+let internalsAvailableInFormAssociatedCallback = false;
 
 class CustomElement extends HTMLElement {
   static get formAssociated() {
@@ -59,6 +60,10 @@ class CustomElement extends HTMLElement {
     return this._value;
   }
 
+  formAssociatedCallback() {
+    internalsAvailableInFormAssociatedCallback = !!this.internals;
+  }
+
   formDisabledCallback() {
     callCount += 1;
   }
@@ -277,5 +282,9 @@ describe('The ElementInternals polyfill', () => {
       }, 'This field is required');
       el.internals.checkValidity();
     });
+
+    it('will call formAssociatedCallback after internals have been set', () => {
+      expect(internalsAvailableInFormAssociatedCallback).to.be.true;
+    })
   });
 });