fix(popover): size property now works when providing only event (#23532)

resolves #23528

Author: liamdebeasi

core/src/components/popover/animations/ios.enter.ts

@@ -19,7 +19,8 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   const contentEl = root.querySelector('.popover-content') as HTMLElement;
   const arrowEl = root.querySelector('.popover-arrow') as HTMLElement | null;
 
-  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, trigger);
+  const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
+  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
   const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
 
   const defaultPosition = {

core/src/components/popover/animations/md.enter.ts

@@ -18,7 +18,9 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   const root = getElementRoot(baseEl);
   const contentEl = root.querySelector('.popover-content') as HTMLElement;
-  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, trigger);
+
+  const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
+  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
 
   const defaultPosition = {
     top: bodyHeight / 2 - contentHeight / 2,

core/src/components/popover/test/size/e2e.ts

@@ -49,3 +49,54 @@ test('should calculate popover width based on trigger width', async () => {
     expect(screenshotCompare).toMatchScreenshot();
   }
 });
+
+test('should calculate popover width based on event width', async () => {
+  const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' });
+
+  const screenshotCompares = [];
+
+  const trigger = await page.find('#event-trigger');
+  trigger.click();
+
+  await page.waitForSelector('.event-popover');
+  const popover = await page.find('.event-popover');
+  await popover.waitForVisible();
+
+  const triggerHandler = await page.$('#event-trigger');
+  const popoverContentHandle = await page.evaluateHandle(`document.querySelector('.event-popover').shadowRoot.querySelector('.popover-content')`);
+  const triggerBbox = await triggerHandler.boundingBox();
+  const popoverBbox = await popoverContentHandle.boundingBox();
+  expect(popoverBbox.width).toEqual(triggerBbox.width);
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  for (const screenshotCompare of screenshotCompares) {
+    expect(screenshotCompare).toMatchScreenshot();
+  }
+});
+
+
+test('should not calculate popover width with no trigger or event', async () => {
+  const page = await newE2EPage({ url: '/src/components/popover/test/size?ionic:_testing=true' });
+
+  const screenshotCompares = [];
+
+  const trigger = await page.find('#no-event-trigger');
+  trigger.click();
+
+  await page.waitForSelector('.no-event-popover');
+  const popover = await page.find('.no-event-popover');
+  await popover.waitForVisible();
+
+  const triggerHandler = await page.$('#no-event-trigger');
+  const popoverContentHandle = await page.evaluateHandle(`document.querySelector('.no-event-popover').shadowRoot.querySelector('.popover-content')`);
+  const triggerBbox = await triggerHandler.boundingBox();
+  const popoverBbox = await popoverContentHandle.boundingBox();
+  expect(popoverBbox.width).not.toEqual(triggerBbox.width);
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  for (const screenshotCompare of screenshotCompares) {
+    expect(screenshotCompare).toMatchScreenshot();
+  }
+});

core/src/components/popover/test/size/index.html

@@ -8,10 +8,14 @@
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <script type="module">
+      import { popoverController } from '../../../../dist/ionic/index.esm.js';
+      window.popoverController = popoverController;
+    </script>
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(4, 1fr);
         grid-row-gap: 20px;
         grid-column-gap: 20px;
 
@@ -66,8 +70,45 @@ <h2>Cover</h2>
               </ion-content>
             </ion-popover>
           </div>
+          <div class="grid-item">
+            <h2>With Event</h2>
+            <ion-button id="event-trigger" onclick="openPopover('event-popover', event)">Trigger</ion-button>
+          </div>
+
+          <div class="grid-item">
+            <h2>No Event</h2>
+            <ion-button id="no-event-trigger" onclick="openPopover('no-event-popover')">Trigger</ion-button>
+          </div>
         </div>
       </ion-content>
     </ion-app>
+
+    <script>
+      class PopoverComponent extends HTMLElement {
+        constructor() {
+          super();
+        }
+
+        connectedCallback() {
+          this.innerHTML = `
+            <ion-content class="ion-padding">
+              My really really really really long content
+            </ion-content>
+          `;
+        }
+      }
+
+      customElements.define('popover-component', PopoverComponent);
+
+      const openPopover = async (cssClass, ev) => {
+        const popover = await popoverController.create({
+          component: 'popover-component',
+          cssClass,
+          size: 'cover',
+          event: ev
+        });
+        await popover.present();
+      }
+    </script>
   </body>
 </html>