fix: observe internal layout to avoid problems with fixed height (#8268)

vaadin · Dec 5, 2024 · b6e0d1f · b6e0d1f
1 parent 4b7db8b
commit b6e0d1f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/packages/form-layout/src/vaadin-form-layout.js b/packages/form-layout/src/vaadin-form-layout.js
@@ -293,7 +293,7 @@ class FormLayout extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))
     requestAnimationFrame(() => this._updateLayout());
 
     this._observeChildrenColspanChange();
-    this.__intersectionObserver.observe(this);
+    this.__intersectionObserver.observe(this.$.layout);
   }
 
   /** @protected */

diff --git a/packages/form-layout/test/form-layout.test.js b/packages/form-layout/test/form-layout.test.js
@@ -580,6 +580,42 @@ describe('form layout', () => {
     });
   });
 
+  describe('fixed size parent', () => {
+    let container, layout;
+
+    beforeEach(async () => {
+      container = fixtureSync(`
+        <div style="height: 100px; overflow: auto">
+          <div style="height: 25px">
+            <vaadin-form-layout style="height: 100%">
+              <div>1</div>
+              <div>2</div>
+              <div>3</div>
+              <div>4</div>
+              <div>5</div>
+              <div>6</div>
+              <div>7</div>
+              <div>8</div>
+              <div>9</div>
+              <div>10</div>
+            </vaadin-form-layout>
+          </div>
+        </div>
+      `);
+      layout = container.querySelector('vaadin-form-layout');
+      layout.responsiveSteps = [{ columns: 1 }];
+      await nextRender();
+    });
+
+    it('should not set opacity to 0 when host is scrolled out due to fixed height', async () => {
+      container.scrollTop = container.scrollHeight;
+      // Wait for intersection observer
+      await nextFrame();
+      await nextFrame();
+      expect(layout.$.layout.style.opacity).to.equal('');
+    });
+  });
+
   describe('mutations', () => {
     let container, layout;