fix: do not update form-layout when it is not visible (#7792) (CP: 24.4)

packages/form-layout/package.json

@@ -36,6 +36,7 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
+    "@vaadin/a11y-base": "~24.4.8",
     "@vaadin/component-base": "~24.4.8",
     "@vaadin/vaadin-lumo-styles": "~24.4.8",
     "@vaadin/vaadin-material-styles": "~24.4.8",

packages/form-layout/src/vaadin-form-layout.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
@@ -456,6 +457,11 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
    * @protected
    */
   _updateLayout() {
+    // Do not update layout when invisible
+    if (isElementHidden(this)) {
+      return;
+    }
+
     /*
       The item width formula:
 

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

@@ -627,5 +627,14 @@ describe('form layout', () => {
       await nextRender(container);
       expect(getComputedStyle(itemsList[1]).marginLeft).to.be.equal('0px');
     });
+
+    it('should not update layout when setting hidden to true', async () => {
+      const percent = getParsedWidth(layout.firstElementChild).percentage;
+
+      container.hidden = true;
+      await nextRender();
+
+      expect(getParsedWidth(layout.firstElementChild).percentage).to.be.equal(percent);
+    });
   });
 });