fix: remove responsive step styles when switching to auto-responsive (#8860)

* fix: do not force layout update immediately

* wip

* update snapshots

Author: vursen

packages/form-layout/src/layouts/responsive-steps-layout.js

@@ -53,6 +53,24 @@ export class ResponsiveStepsLayout extends AbstractLayout {
     requestAnimationFrame(() => this.updateLayout());
   }
 
+  /** @override */
+  disconnect() {
+    if (!this.isConnected) {
+      return;
+    }
+
+    super.disconnect();
+
+    const { host } = this;
+    host.$.layout.style.removeProperty('opacity');
+    [...host.children].forEach((child) => {
+      child.style.removeProperty('width');
+      child.style.removeProperty('margin-left');
+      child.style.removeProperty('margin-right');
+      child.removeAttribute('label-position');
+    });
+  }
+
   /** @override */
   setProps(props) {
     const { responsiveSteps } = props;
@@ -206,6 +224,10 @@ export class ResponsiveStepsLayout extends AbstractLayout {
 
   /** @private */
   __selectResponsiveStep() {
+    if (!this.isConnected) {
+      return;
+    }
+
     const { host, props } = this;
     // Iterate through responsiveSteps and choose the step
     let selectedStep;

packages/form-layout/test/dom/__snapshots__/form-layout.test.snap.js

@@ -308,3 +308,56 @@ snapshots["vaadin-form-layout defaultAutoResponsiveFormLayout feature flag defau
 `;
 /* end snapshot vaadin-form-layout defaultAutoResponsiveFormLayout feature flag default */
 
+snapshots["vaadin-form-layout responsive-steps host default"] = 
+`<vaadin-form-layout>
+  <input
+    placeholder="First name"
+    style="width: calc(50% - 1em); margin-left: 0px;"
+  >
+  <input
+    placeholder="Last name"
+    style="width: calc(50% - 1em); margin-right: 0px;"
+  >
+</vaadin-form-layout>
+`;
+/* end snapshot vaadin-form-layout responsive-steps host default */
+
+snapshots["vaadin-form-layout responsive-steps host switching to autoResponsive"] = 
+`<vaadin-form-layout
+  auto-responsive=""
+  style="--_column-width: 13em; --_max-columns: 1;"
+>
+  <input
+    placeholder="First name"
+    style=""
+  >
+  <input
+    placeholder="Last name"
+    style=""
+  >
+</vaadin-form-layout>
+`;
+/* end snapshot vaadin-form-layout responsive-steps host switching to autoResponsive */
+
+snapshots["vaadin-form-layout responsive-steps shadow default"] = 
+`<div
+  id="layout"
+  style=""
+>
+  <slot id="slot">
+  </slot>
+</div>
+`;
+/* end snapshot vaadin-form-layout responsive-steps shadow default */
+
+snapshots["vaadin-form-layout responsive-steps shadow switching to autoResponsive"] = 
+`<div
+  id="layout"
+  style="--_grid-rendered-column-count: 1;"
+>
+  <slot id="slot">
+  </slot>
+</div>
+`;
+/* end snapshot vaadin-form-layout responsive-steps shadow switching to autoResponsive */
+

packages/form-layout/test/dom/form-layout.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextResize } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
 import '../../src/vaadin-form-layout.js';
 
 const DEFAULT_COLUMN_WIDTH = '12em';
@@ -161,4 +161,41 @@ describe('vaadin-form-layout', () => {
       await expect(layout).dom.to.equalSnapshot();
     });
   });
+
+  describe('responsive-steps', () => {
+    beforeEach(async () => {
+      layout = fixtureSync(`
+        <vaadin-form-layout>
+          <input placeholder="First name" />
+          <input placeholder="Last name" />
+        </vaadin-form-layout>
+      `);
+      layout.responsiveSteps = [{ columns: 2, labelsPosition: 'top' }];
+      await nextFrame();
+    });
+
+    describe('host', () => {
+      it('default', async () => {
+        await expect(layout).dom.to.equalSnapshot();
+      });
+
+      it('switching to autoResponsive', async () => {
+        layout.autoResponsive = true;
+        await nextResize(layout);
+        await expect(layout).dom.to.equalSnapshot();
+      });
+    });
+
+    describe('shadow', () => {
+      it('default', async () => {
+        await expect(layout).shadowDom.to.equalSnapshot();
+      });
+
+      it('switching to autoResponsive', async () => {
+        layout.autoResponsive = true;
+        await nextResize(layout);
+        await expect(layout).shadowDom.to.equalSnapshot();
+      });
+    });
+  });
 });