refactor: disable formAssociated on custom element constructor (#3984)

salesforce · Feb 7, 2024 · 88eb835 · 88eb835
1 parent 72c8c09
commit 88eb835
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/packages/@lwc/engine-dom/src/custom-elements/create-custom-element.ts b/packages/@lwc/engine-dom/src/custom-elements/create-custom-element.ts
@@ -37,7 +37,8 @@ let elementBeingUpgradedByLWC = false;
 const createUpgradableConstructor = () => {
     // TODO [#2972]: this class should expose observedAttributes as necessary
     class UpgradableConstructor extends HTMLElement {
-        static formAssociated = true;
+        // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+        // static formAssociated = true;
 
         constructor(upgradeCallback: LifecycleCallback, useNativeLifecycle: boolean) {
             super();

diff --git a/.../component/LightningElement.attachInternals/elementInternals/formAssociated/index.spec.js b/.../component/LightningElement.attachInternals/elementInternals/formAssociated/index.spec.js
@@ -5,7 +5,8 @@ import FormAssociated from 'x/formAssociated';
 
 if (typeof ElementInternals !== 'undefined' && !process.env.SYNTHETIC_SHADOW_ENABLED) {
     // Verify ElementInternals proxy getter throws error.
-    it('form-related operations and attributes should throw DOMException for non-form-associated custom elements.', () => {
+    // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+    xit('form-related operations and attributes should throw DOMException for non-form-associated custom elements.', () => {
         const control = createElement('x-not-form-associated', { is: NotFormAssociated });
         expect(() => control.internals.setFormValue('')).toThrowError(
             /The target element is not a form-associated custom element./
@@ -45,7 +46,8 @@ if (typeof ElementInternals !== 'undefined' && !process.env.SYNTHETIC_SHADOW_ENA
     };
 
     // Verify ElementInternals proxy getter does not throw error.
-    it('form-related operations and attributes should not throw for form-associated custom elements.', () => {
+    // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+    xit('form-related operations and attributes should not throw for form-associated custom elements.', () => {
         const control = createControlElm();
         expect(() => control.internals.setFormValue).not.toThrowError();
         expect(() => control.internals.form).not.toThrowError();
@@ -59,7 +61,8 @@ if (typeof ElementInternals !== 'undefined' && !process.env.SYNTHETIC_SHADOW_ENA
     });
 
     // Verify basic functionality works correctly in presence of proxy.
-    it('form-related operations and attributes sanity test', () => {
+    // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+    xit('form-related operations and attributes sanity test', () => {
         const control = createControlElm();
         const form = document.body.querySelector('form');
 

diff --git a/packages/@lwc/integration-karma/test/component/face-callbacks/index.spec.js b/packages/@lwc/integration-karma/test/component/face-callbacks/index.spec.js
@@ -74,14 +74,17 @@ const testWarningLoggedWhenFormAssociatedNotSet = (ctor) => {
 if (typeof ElementInternals !== 'undefined') {
     if (nativeCustomElementLifecycleEnabled) {
         // native lifecycle enabled
-        describe('native lifecycle', () => {
+        // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+        xdescribe('native lifecycle', () => {
             if (process.env.NATIVE_SHADOW) {
-                describe('native shadow', () => {
+                // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+                xdescribe('native shadow', () => {
                     faceSanityTest(FormAssociated);
                     testWarningLoggedWhenFormAssociatedNotSet(NotFormAssociated);
                 });
             } else {
-                describe('synthetic shadow', () => {
+                // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+                xdescribe('synthetic shadow', () => {
                     it('cannot be used and throws an error', () => {
                         const form = createFormElement();
                         const face = createElement('face-form-associated', { is: FormAssociated });
@@ -92,14 +95,15 @@ if (typeof ElementInternals !== 'undefined') {
                     });
                 });
             }
-
-            describe('light DOM', () => {
+            // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+            xdescribe('light DOM', () => {
                 faceSanityTest(LightDomFormAssociated);
                 testWarningLoggedWhenFormAssociatedNotSet(LightDomNotFormAssociated);
             });
         });
     } else {
-        describe('synthetic lifecycle', () => {
+        // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+        xdescribe('synthetic lifecycle', () => {
             [
                 { name: 'shadow DOM', is: FormAssociated },
                 { name: 'light DOM', is: LightDomFormAssociated },

diff --git a/packages/@lwc/integration-karma/test/custom-elements/index.spec.js b/packages/@lwc/integration-karma/test/custom-elements/index.spec.js
@@ -342,7 +342,8 @@ const supportsFACE =
     'setFormValue' in window.ElementInternals.prototype;
 
 if (supportsFACE) {
-    describe('form-associated custom element (FACE) lifecycle callbacks', () => {
+    // TODO [#3983]: Re-enable formAssociated once there is a solution for the observable behavior it introduces.
+    xdescribe('form-associated custom element (FACE) lifecycle callbacks', () => {
         function testFormAssociated(shouldBeFormAssociated, tagName, Ctor) {
             const calls = [];