diff --git a/packages/form-layout/package.json b/packages/form-layout/package.json index af11c06e06..09b987edbf 100644 --- 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 index 1f530d9e18..7c6ce221b5 100644 --- 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 index e2f59e3541..fa51249108 100644 --- 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); + }); }); });