fix: update form-layout when its parent becomes visible (#7988) (#7993)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

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

@@ -240,6 +240,11 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
       _labelsOnTop: {
         type: Boolean,
       },
+
+      /** @private */
+      __isVisible: {
+        type: Boolean,
+      },
     };
   }
 
@@ -264,6 +269,22 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
     this.addEventListener('animationend', this.__onAnimationEnd);
   }
 
+  constructor() {
+    super();
+
+    this.__intersectionObserver = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) {
+        // Prevent possible jump when layout becomes visible
+        this.$.layout.style.opacity = 0;
+      }
+      if (!this.__isVisible && entry.isIntersecting) {
+        this._updateLayout();
+        this.$.layout.style.opacity = '';
+      }
+      this.__isVisible = entry.isIntersecting;
+    });
+  }
+
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
@@ -272,6 +293,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
     requestAnimationFrame(() => this._updateLayout());
 
     this._observeChildrenColspanChange();
+    this.__intersectionObserver.observe(this);
   }
 
   /** @protected */
@@ -280,6 +302,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
 
     this.__mutationObserver.disconnect();
     this.__childObserver.disconnect();
+    this.__intersectionObserver.disconnect();
   }
 
   /** @private */

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

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '@polymer/polymer/lib/elements/dom-repeat.js';
 import '@vaadin/text-field/vaadin-text-field.js';
@@ -519,7 +519,10 @@ describe('form layout', () => {
     beforeEach(() => {
       container = fixtureSync(`
         <div hidden>
-          <vaadin-form-layout></vaadin-form-layout>
+          <vaadin-form-layout>
+            <div>Foo</div>
+            <div>Bar</div>
+          </vaadin-form-layout>
         </div>
       `);
       layout = container.querySelector('vaadin-form-layout');
@@ -546,6 +549,35 @@ describe('form layout', () => {
       ev.animationName = 'foo';
       layout.dispatchEvent(ev);
     });
+
+    it('should update layout when its parent becomes visible', async () => {
+      layout.responsiveSteps = [{ columns: 1 }];
+      await nextRender();
+
+      container.hidden = false;
+
+      // Wait for intersection observer
+      await nextFrame();
+      await nextFrame();
+
+      expect(parseFloat(getParsedWidth(layout.children[0]).percentage)).to.be.closeTo(100, 0.1);
+      expect(parseFloat(getParsedWidth(layout.children[1]).percentage)).to.be.closeTo(100, 0.1);
+    });
+
+    it('should change layout opacity when its parent becomes visible', async () => {
+      // Wait for intersection observer
+      await nextFrame();
+      await nextFrame();
+      expect(layout.$.layout.style.opacity).to.equal('0');
+
+      container.hidden = false;
+
+      // Wait for intersection observer
+      await nextFrame();
+      await nextFrame();
+
+      expect(layout.$.layout.style.opacity).to.equal('');
+    });
   });
 
   describe('mutations', () => {