fix: make popover width and height work when set before attach (#10077)

Author: web-padawan

packages/popover/src/vaadin-popover.js

@@ -435,7 +435,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   static get observers() {
-    return ['__sizeChanged(width, height, _overlayElement)', '__updateAriaAttributes(opened, role, target)'];
+    return ['__updateAriaAttributes(opened, role, target)'];
   }
 
   /**
@@ -572,6 +572,11 @@ class Popover extends PopoverPositionMixin(
   updated(props) {
     super.updated(props);
 
+    if (props.has('width') || props.has('height')) {
+      const { width, height } = this;
+      requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }, false));
+    }
+
     if (props.has('accessibleName')) {
       if (this.accessibleName) {
         this.setAttribute('aria-label', this.accessibleName);
@@ -1019,13 +1024,6 @@ class Popover extends PopoverPositionMixin(
     return Array.isArray(this.trigger) && this.trigger.includes(trigger);
   }
 
-  /** @private */
-  __sizeChanged(width, height, overlay) {
-    if (overlay) {
-      requestAnimationFrame(() => overlay.setBounds({ width, height }, false));
-    }
-  }
-
   /**
    * Fired when the popover is closed.
    *

packages/popover/test/basic.test.js

@@ -572,45 +572,79 @@ describe('popover', () => {
   });
 
   describe('dimensions', () => {
-    beforeEach(async () => {
-      popover.opened = true;
-      await oneEvent(overlay, 'vaadin-overlay-open');
-    });
+    describe('default', () => {
+      beforeEach(async () => {
+        popover.opened = true;
+        await oneEvent(overlay, 'vaadin-overlay-open');
+      });
 
-    it('should update width after opening the popover', async () => {
-      popover.width = '300px';
-      await nextRender();
-      expect(getComputedStyle(overlay.$.overlay).width).to.equal('300px');
-    });
+      it('should update width after opening the popover', async () => {
+        popover.width = '300px';
+        await nextRender();
+        expect(getComputedStyle(overlay.$.overlay).width).to.equal('300px');
+      });
 
-    it('should update height after opening the popover', async () => {
-      popover.height = '500px';
-      await nextRender();
-      expect(getComputedStyle(overlay.$.overlay).height).to.equal('500px');
-    });
+      it('should update height after opening the popover', async () => {
+        popover.height = '500px';
+        await nextRender();
+        expect(getComputedStyle(overlay.$.overlay).height).to.equal('500px');
+      });
 
-    it('should reset style after setting width to null', async () => {
-      const originalWidth = getComputedStyle(overlay.$.overlay).width;
+      it('should reset style after setting width to null', async () => {
+        const originalWidth = getComputedStyle(overlay.$.overlay).width;
 
-      popover.width = '500px';
-      await nextRender();
-      expect(getComputedStyle(overlay.$.overlay).width).to.equal('500px');
+        popover.width = '500px';
+        await nextRender();
+        expect(getComputedStyle(overlay.$.overlay).width).to.equal('500px');
 
-      popover.width = null;
-      await nextRender();
-      expect(getComputedStyle(overlay.$.overlay).width).to.equal(originalWidth);
+        popover.width = null;
+        await nextRender();
+        expect(getComputedStyle(overlay.$.overlay).width).to.equal(originalWidth);
+      });
+
+      it('should reset style after setting height to null', async () => {
+        const originalHeight = getComputedStyle(overlay.$.overlay).height;
+
+        popover.height = '500px';
+        await nextRender();
+        expect(getComputedStyle(overlay.$.overlay).height).to.equal('500px');
+
+        popover.height = null;
+        await nextRender();
+        expect(getComputedStyle(overlay.$.overlay).height).to.equal(originalHeight);
+      });
     });
 
-    it('should reset style after setting height to null', async () => {
-      const originalHeight = getComputedStyle(overlay.$.overlay).height;
+    describe('set before attach', () => {
+      beforeEach(() => {
+        popover = document.createElement('vaadin-popover');
+      });
 
-      popover.height = '500px';
-      await nextRender();
-      expect(getComputedStyle(overlay.$.overlay).height).to.equal('500px');
+      afterEach(() => {
+        popover.remove();
+      });
 
-      popover.height = null;
-      await nextRender();
-      expect(getComputedStyle(overlay.$.overlay).height).to.equal(originalHeight);
+      it('should apply overlay width when set before attach', async () => {
+        popover.width = '300px';
+        document.body.appendChild(popover);
+        await nextRender();
+
+        popover.opened = true;
+        await oneEvent(popover.$.overlay, 'vaadin-overlay-open');
+
+        expect(getComputedStyle(popover.$.overlay.$.overlay).width).to.equal('300px');
+      });
+
+      it('should apply overlay height when set before attach', async () => {
+        popover.height = '300px';
+        document.body.appendChild(popover);
+        await nextRender();
+
+        popover.opened = true;
+        await oneEvent(popover.$.overlay, 'vaadin-overlay-open');
+
+        expect(getComputedStyle(popover.$.overlay.$.overlay).height).to.equal('300px');
+      });
     });
   });