refactor: set overflow attribute on dialog overlay content change (#9903)

Author: web-padawan

packages/dialog/src/vaadin-dialog-overlay-mixin.js

@@ -68,14 +68,21 @@ export const DialogOverlayMixin = (superClass) =>
 
       // Update overflow attribute on resize
       this.__resizeObserver = new ResizeObserver(() => {
-        this.__updateOverflow();
+        requestAnimationFrame(() => {
+          this.__updateOverflow();
+        });
       });
       this.__resizeObserver.observe(this.$.resizerContainer);
 
       // Update overflow attribute on scroll
       this.$.content.addEventListener('scroll', () => {
         this.__updateOverflow();
       });
+
+      // Update overflow attribute on content change
+      this.shadowRoot.addEventListener('slotchange', () => {
+        this.__updateOverflow();
+      });
     }
 
     /** @private */
@@ -230,18 +237,14 @@ export const DialogOverlayMixin = (superClass) =>
     __updateOverflow() {
       let overflow = '';
 
-      // Only set "overflow" attribute if the dialog has a header, title or footer.
-      // Check for state attributes as extending components might not use renderers.
-      if (this.hasAttribute('has-header') || this.hasAttribute('has-footer') || this.headerTitle) {
-        const content = this.$.content;
+      const content = this.$.content;
 
-        if (content.scrollTop > 0) {
-          overflow += ' top';
-        }
+      if (content.scrollTop > 0) {
+        overflow += ' top';
+      }
 
-        if (content.scrollTop < content.scrollHeight - content.clientHeight) {
-          overflow += ' bottom';
-        }
+      if (content.scrollTop < content.scrollHeight - content.clientHeight) {
+        overflow += ' bottom';
       }
 
       const value = overflow.trim();

packages/dialog/test/draggable-resizable.test.js

@@ -842,7 +842,7 @@ describe('overflowing content', () => {
     div.style.maxWidth = '300px';
     div.style.overflow = 'auto';
     div.textContent = Array(100).join('Lorem ipsum dolor sit amet');
-    overlay.appendChild(div);
+    dialog.appendChild(div);
     // Emulate removing "pointer-events: none"
     overlayPart.setAttribute('style', '');
     expect(overlayPart.offsetHeight).to.equal(container.offsetHeight);
@@ -851,7 +851,7 @@ describe('overflowing content', () => {
   it('should not reset scroll position on resize', async () => {
     const div = document.createElement('div');
     div.textContent = Array(100).join('Lorem ipsum dolor sit amet');
-    overlay.appendChild(div);
+    dialog.appendChild(div);
     dialog.$.overlay.setBounds({ height: 200 });
     await nextFrame();
     overlay.$.content.style.padding = '20px';

packages/dialog/test/header-footer.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextRender, nextResize, nextUpdate } from '@vaadin/testing-helpers';
+import { fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-dialog.js';
 import { createRenderer } from './helpers.js';
@@ -482,137 +482,6 @@ describe('header/footer feature', () => {
       expect(getComputedStyle(headerPart).display).to.be.equal('none');
     });
   });
-
-  describe('overflow attribute', () => {
-    let content, headerHeight, footerHeight, contentHeight;
-
-    beforeEach(async () => {
-      dialog.headerRenderer = createRenderer('Header');
-      dialog.footerRenderer = createRenderer('Footer');
-      dialog.renderer = createRenderer(Array(10).join('Lorem ipsum dolor sit amet\n'));
-      dialog.resizable = true;
-      dialog.opened = true;
-      await nextRender();
-      content = overlay.$.content;
-      overlay.style.maxWidth = '300px';
-
-      headerHeight = overlay.shadowRoot.querySelector('[part=header]').offsetHeight;
-      footerHeight = overlay.shadowRoot.querySelector('[part=footer]').offsetHeight;
-      contentHeight = overlay.shadowRoot.querySelector('[part=content]').offsetHeight;
-    });
-
-    describe('resize', () => {
-      it('should not set overflow attribute when content has no scrollbar', () => {
-        expect(dialog.hasAttribute('overflow')).to.be.false;
-        expect(overlay.hasAttribute('overflow')).to.be.false;
-      });
-
-      it('should set overflow attribute when scrollbar appears on resize', async () => {
-        overlay.style.maxHeight = `${contentHeight}px`;
-        await nextResize(overlay);
-        expect(dialog.getAttribute('overflow')).to.equal('bottom');
-        expect(overlay.getAttribute('overflow')).to.equal('bottom');
-      });
-
-      it('should remove overflow attribute when header renderer is removed', async () => {
-        overlay.style.maxHeight = `${contentHeight + footerHeight}px`;
-        await nextResize(overlay);
-        expect(dialog.hasAttribute('overflow')).to.be.true;
-        expect(overlay.hasAttribute('overflow')).to.be.true;
-
-        dialog.headerRenderer = null;
-        await nextUpdate(dialog);
-        expect(dialog.hasAttribute('overflow')).to.be.false;
-        expect(overlay.hasAttribute('overflow')).to.be.false;
-      });
-
-      it('should remove overflow attribute when footer renderer is removed', async () => {
-        overlay.style.maxHeight = `${contentHeight + headerHeight}px`;
-        await nextResize(overlay);
-        expect(dialog.hasAttribute('overflow')).to.be.true;
-        expect(overlay.hasAttribute('overflow')).to.be.true;
-
-        dialog.footerRenderer = null;
-        await nextUpdate(dialog);
-        expect(dialog.hasAttribute('overflow')).to.be.false;
-        expect(overlay.hasAttribute('overflow')).to.be.false;
-      });
-
-      it('should set overflow attribute when header title property is set', async () => {
-        dialog.headerRenderer = null;
-        dialog.footerRenderer = null;
-        await nextUpdate(dialog);
-
-        overlay.style.maxHeight = `${contentHeight}px`;
-        await nextResize(overlay);
-        expect(dialog.hasAttribute('overflow')).to.be.false;
-        expect(overlay.hasAttribute('overflow')).to.be.false;
-
-        dialog.headerTitle = 'Title';
-        await nextUpdate(dialog);
-        expect(dialog.getAttribute('overflow')).to.equal('bottom');
-        expect(overlay.getAttribute('overflow')).to.equal('bottom');
-      });
-
-      it('should remove overflow attribute when header title is removed', async () => {
-        dialog.headerRenderer = null;
-        dialog.footerRenderer = null;
-        dialog.headerTitle = 'Title';
-        await nextUpdate(dialog);
-
-        overlay.style.maxHeight = `${contentHeight}px`;
-        await nextResize(overlay);
-        expect(dialog.hasAttribute('overflow')).to.be.true;
-        expect(overlay.hasAttribute('overflow')).to.be.true;
-
-        dialog.headerTitle = null;
-        await nextUpdate(dialog);
-        expect(dialog.hasAttribute('overflow')).to.be.false;
-        expect(overlay.hasAttribute('overflow')).to.be.false;
-      });
-
-      it('should remove overflow attribute if no header, footer or title is set', async () => {
-        dialog.headerTitle = 'Title';
-        overlay.style.maxHeight = `${contentHeight}px`;
-        await nextResize(overlay);
-
-        dialog.headerRenderer = null;
-        dialog.footerRenderer = null;
-        dialog.headerTitle = null;
-        await nextUpdate(dialog);
-        expect(dialog.hasAttribute('overflow')).to.be.false;
-        expect(overlay.hasAttribute('overflow')).to.be.false;
-      });
-    });
-
-    describe('scroll', () => {
-      beforeEach(async () => {
-        dialog.renderer = createRenderer(Array(100).join('Lorem ipsum dolor sit amet\n'));
-        await nextUpdate(dialog);
-      });
-
-      it('should set overflow to "bottom" when scrollbar appears after re-render', () => {
-        expect(dialog.getAttribute('overflow')).to.equal('bottom');
-        expect(overlay.getAttribute('overflow')).to.equal('bottom');
-      });
-
-      it('should update overflow to "top bottom" on partial content scroll', () => {
-        content.scrollTop += 200;
-        content.dispatchEvent(new CustomEvent('scroll'));
-
-        expect(dialog.getAttribute('overflow')).to.equal('top bottom');
-        expect(overlay.getAttribute('overflow')).to.equal('top bottom');
-      });
-
-      it('should update overflow to "top" when content is fully scrolled', () => {
-        content.scrollTop += content.scrollHeight - content.clientHeight;
-        content.dispatchEvent(new CustomEvent('scroll'));
-
-        expect(dialog.getAttribute('overflow')).to.equal('top');
-        expect(overlay.getAttribute('overflow')).to.equal('top');
-      });
-    });
-  });
 });
 
 describe('renderer set before attach', () => {