From d09576a71345c68059eda7d6576a92203c746ced Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 11 Sep 2024 13:08:54 +0300 Subject: [PATCH 1/2] fix: do not update form-layout when it is not visible --- packages/form-layout/package.json | 1 + packages/form-layout/src/vaadin-form-layout.js | 6 ++++++ packages/form-layout/test/form-layout.test.js | 9 +++++++++ 3 files changed, 16 insertions(+) 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..d16229305f 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 false; + } + /* 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); + }); }); }); From 5749831889f78596cee12a5867f020f74b6c7689 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Wed, 11 Sep 2024 14:36:01 +0300 Subject: [PATCH 2/2] Update packages/form-layout/src/vaadin-form-layout.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sascha Ißbrücker --- packages/form-layout/src/vaadin-form-layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/form-layout/src/vaadin-form-layout.js b/packages/form-layout/src/vaadin-form-layout.js index d16229305f..7c6ce221b5 100644 --- a/packages/form-layout/src/vaadin-form-layout.js +++ b/packages/form-layout/src/vaadin-form-layout.js @@ -459,7 +459,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)) _updateLayout() { // Do not update layout when invisible if (isElementHidden(this)) { - return false; + return; } /*