diff --git a/packages/form-layout/src/vaadin-form-layout.js b/packages/form-layout/src/vaadin-form-layout.js index 34a0e7f501..45e728275e 100644 --- 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 index 882d727e14..0d06309f68 100644 --- 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(` +
+
+ +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+
+ `); + 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;