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

vaadin · Sep 11, 2024 · 7dcd7cb · 7dcd7cb
1 parent 554b1e1
commit 7dcd7cb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/packages/form-layout/package.json b/packages/form-layout/package.json
@@ -36,6 +36,7 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
+    "@vaadin/a11y-base": "24.5.0-alpha11",
     "@vaadin/component-base": "24.5.0-alpha11",
     "@vaadin/vaadin-lumo-styles": "24.5.0-alpha11",
     "@vaadin/vaadin-material-styles": "24.5.0-alpha11",

diff --git a/packages/form-layout/src/vaadin-form-layout.js b/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:
 

diff --git a/packages/form-layout/test/form-layout.test.js b/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);
+    });
   });
 });