fix: update form validity check algorithm to not call checkValidity on all changes

Author: calebdwilliams

Diff for: src/utils.ts

@@ -87,9 +87,18 @@ export const initLabels = (ref: ICustomElement, labels: LabelsList): void => {
  * @return {void}
  */
 export const setFormValidity = (form: HTMLFormElement) => {
-  const valid = form.checkValidity();
-  form.toggleAttribute('internals-invalid', !valid);
-  form.toggleAttribute('internals-valid', valid);
+  const nativeControlValidity = Array.from(form.elements)
+    .map(
+      (element: Element & { validity: ValidityState }) => element.validity.valid
+    );
+  const polyfilledVaidity = Array.from(formElementsMap.get(form))
+    .filter(control => control.isConnected)
+    .map((control: ICustomElement) =>
+      internalsMap.get(control).validity.valid
+    );
+  const hasInvalid = [...nativeControlValidity, ...polyfilledVaidity].includes(false);
+  form.toggleAttribute('internals-invalid', hasInvalid);
+  form.toggleAttribute('internals-valid', !hasInvalid);
 }
 
 /**

Diff for: test/ElementInternals.test.js

@@ -95,18 +95,18 @@ describe('The ElementInternals polyfill', () => {
       input.required = input.required;
       input.dispatchEvent(new Event(eventType, options));
     }
-    
+
     beforeEach(async () => {
       form = await fixture(`<form><test-el></test-el></form>`);
       input = form.querySelector('test-el');
       input.required = true;
       simultateEvent('input');
     });
-  
+
     afterEach(async () => {
       await fixtureCleanup(form);
     });
-  
+
     it('form should be invalid when form-associated custom element is invalid', () => {
       expect(form.checkValidity()).to.be.false;
     });