Dropdown: items not shown when used within kirby-page (#3392)

libs/designsystem/dropdown/src/dropdown.component.spec.ts

@@ -5,6 +5,7 @@ import { createHostFactory, Spectator, SpectatorHost } from '@ngneat/spectator';
 import { MockComponents } from 'ng-mocks';
 
 import { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
+import { TestHelper } from '@kirbydesign/designsystem/testing';
 import { CardComponent } from '@kirbydesign/designsystem/card';
 import { IconComponent } from '@kirbydesign/designsystem/icon';
 import { ItemComponent, ItemModule } from '@kirbydesign/designsystem/item';
@@ -1143,4 +1144,43 @@ describe('DropdownComponent', () => {
       });
     });
   });
+
+  describe('when configured with expand=block and usePopover=true', () => {
+    const createHost = createHostFactory({
+      component: DropdownComponent,
+      imports: [ItemModule],
+      declarations: [
+        ItemComponent,
+        MockComponents(ButtonComponent, CardComponent, IconComponent, IonItem, PopoverComponent),
+      ],
+    });
+
+    let spectator: SpectatorHost<DropdownComponent>;
+
+    beforeEach(() => {
+      spectator = createHost(`<kirby-dropdown></kirby-dropdown>`, {
+        props: {
+          items: items,
+          expand: 'block',
+          usePopover: true,
+        },
+      });
+    });
+
+    it('should update popover card size when resized', async () => {
+      const initWidth = spectator.element.clientWidth;
+      const popoverCard = spectator.element.querySelector<HTMLElement>('kirby-card');
+      const initCardWidth = popoverCard.style.getPropertyValue('--kirby-card-width');
+      expect(initCardWidth).toEqual(`${initWidth}px`);
+
+      const newWidth = '200px';
+      (spectator.hostElement as HTMLElement).style.width = newWidth;
+      await TestHelper.waitForResizeObserver();
+      // Resize observe callback can be flaky in test, so ensure width has changed before asserting:
+      await TestHelper.whenTrue(() => spectator.element.clientWidth !== initWidth);
+
+      const cardWidth = popoverCard.style.getPropertyValue('--kirby-card-width');
+      expect(cardWidth).toEqual(newWidth);
+    });
+  });
 });

libs/designsystem/dropdown/src/dropdown.component.ts

@@ -26,8 +26,9 @@ import { ItemComponent } from '@kirbydesign/designsystem/item';
 import { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';
 import { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
-
 import { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';
+import { ResizeObserverService } from '@kirbydesign/designsystem/shared';
+
 import { OpenState, VerticalDirection } from './dropdown.types';
 import { KeyboardHandlerService } from './keyboard-handler.service';
 
@@ -245,7 +246,8 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
     private renderer: Renderer2,
     private elementRef: ElementRef<HTMLElement>,
     private changeDetectorRef: ChangeDetectorRef,
-    private keyboardHandlerService: KeyboardHandlerService
+    private keyboardHandlerService: KeyboardHandlerService,
+    private resizeObserverService: ResizeObserverService
   ) {}
 
   onToggle(event: MouseEvent) {
@@ -286,10 +288,18 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
 
   ngAfterViewInit() {
     if (this.usePopover && this.expand === 'block') {
-      const { width } = this.elementRef.nativeElement.getBoundingClientRect();
-      this.setPopoverCardStyle('--kirby-card-width', `${width}px`);
+      const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();
       this.setPopoverCardStyle('max-width', 'initial');
       this.setPopoverCardStyle('min-width', 'initial');
+      // Ensure initial width is set even if the resize observer callback also fires initially:
+      this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);
+
+      this.resizeObserverService.observe(this.elementRef, (entry) => {
+        const newWidth = entry.contentRect.width;
+        if (newWidth > 0) {
+          this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);
+        }
+      });
     }
     this.initializeAlignment();
   }
@@ -629,6 +639,7 @@ export class DropdownComponent implements AfterViewInit, OnDestroy, ControlValue
 
   ngOnDestroy(): void {
     this.unlistenAllSlottedItems();
+    this.resizeObserverService.unobserve(this.elementRef);
     if (this.intersectionObserverRef) {
       this.intersectionObserverRef.disconnect();
     }