fix(zone.js): patch form-associated custom element callbacks (#50686)

arturovt · AndrewKushnir · commit 1c990cdb2962 · 2024-02-12T08:50:55.000-08:00
This commit updates the implementation of the `customElements` patch and also patches FACE callbacks (`formAssociatedCallback`, `formDisabledCallback`, `formResetCallback` and `formStateRestoreCallback`). This now allows invoking those callbacks in the same zone where the custom element has been defined. PR Close #50686
diff --git a/packages/zone.js/lib/browser/custom-elements.ts b/packages/zone.js/lib/browser/custom-elements.ts
@@ -12,8 +12,12 @@ export function patchCustomElements(_global: any, api: _ZonePrivate) {
     return;
   }
 
-  const callbacks =
-      ['connectedCallback', 'disconnectedCallback', 'adoptedCallback', 'attributeChangedCallback'];
+  // https://html.spec.whatwg.org/multipage/custom-elements.html#concept-custom-element-definition-lifecycle-callbacks
+  const callbacks = [
+    'connectedCallback', 'disconnectedCallback', 'adoptedCallback', 'attributeChangedCallback',
+    'formAssociatedCallback', 'formDisabledCallback', 'formResetCallback',
+    'formStateRestoreCallback'
+  ];
 
   api.patchCallbacks(api, _global.customElements, 'customElements', 'define', callbacks);
 }
diff --git a/packages/zone.js/lib/zone.configurations.api.ts b/packages/zone.js/lib/zone.configurations.api.ts
@@ -414,6 +414,10 @@ declare global {
      *   disconnectedCallback() {}
      *   attributeChangedCallback(attrName, oldVal, newVal) {}
      *   adoptedCallback() {}
+     *   formAssociatedCallback(form) {}
+     *   formDisabledCallback(isDisabled) {}
+     *   formResetCallback() {}
+     *   formStateRestoreCallback(state, reason) {}
      * }
      *
      * const zone = Zone.fork({name: 'myZone'});
diff --git a/packages/zone.js/test/browser/custom-element.spec.js b/packages/zone.js/test/browser/custom-element.spec.js
@@ -16,13 +16,18 @@ function customElementsSupport() {
 }
 customElementsSupport.message = 'window.customElements';
 
+function supportsFormAssociatedElements() {
+  return 'attachInternals' in HTMLElement.prototype;
+}
+
 describe('customElements', function() {
   const testZone = Zone.current.fork({name: 'test'});
   const bridge = {
     connectedCallback: () => {},
     disconnectedCallback: () => {},
     adoptedCallback: () => {},
-    attributeChangedCallback: () => {}
+    attributeChangedCallback: () => {},
+    formAssociatedCallback: () => {}
   };
 
   class TestCustomElement extends HTMLElement {
@@ -51,8 +56,17 @@ describe('customElements', function() {
     }
   }
 
+  class TestFormAssociatedCustomElement extends HTMLElement {
+    static formAssociated = true;
+
+    formAssociatedCallback() {
+      return bridge.formAssociatedCallback();
+    }
+  }
+
   testZone.run(() => {
     customElements.define('x-test', TestCustomElement);
+    customElements.define('x-test-form-associated', TestFormAssociatedCustomElement);
   });
 
   let elt;
@@ -62,6 +76,7 @@ describe('customElements', function() {
     bridge.disconnectedCallback = () => {};
     bridge.attributeChangedCallback = () => {};
     bridge.adoptedCallback = () => {};
+    bridge.formAssociatedCallback = () => {};
   });
 
   afterEach(() => {
@@ -105,4 +120,20 @@ describe('customElements', function() {
     document.body.appendChild(elt);
     elt.setAttribute('attr1', 'value1');
   });
+
+  it('should work with formAssociatedCallback', function(done) {
+    if (!supportsFormAssociatedElements()) {
+      return;
+    }
+
+    bridge.formAssociatedCallback = function() {
+      expect(Zone.current.name).toBe(testZone.name);
+      done();
+    };
+
+    elt = document.createElement('x-test-form-associated');
+    const form = document.createElement('form');
+    form.appendChild(elt);
+    document.body.appendChild(form);
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -12,8 +12,12 @@ export function patchCustomElements(_global: any, api: _ZonePrivate) {`
`12`	`12`	`return;`
`13`	`13`	`}`
`14`	`14`
`15`		`- const callbacks =`
`16`		`- ['connectedCallback', 'disconnectedCallback', 'adoptedCallback', 'attributeChangedCallback'];`
	`15`	`+ // https://html.spec.whatwg.org/multipage/custom-elements.html#concept-custom-element-definition-lifecycle-callbacks`
	`16`	`+ const callbacks = [`
	`17`	`+ 'connectedCallback', 'disconnectedCallback', 'adoptedCallback', 'attributeChangedCallback',`
	`18`	`+ 'formAssociatedCallback', 'formDisabledCallback', 'formResetCallback',`
	`19`	`+ 'formStateRestoreCallback'`
	`20`	`+ ];`
`17`	`21`
`18`	`22`	`api.patchCallbacks(api, _global.customElements, 'customElements', 'define', callbacks);`
`19`	`23`	`}`