Adapt mention-listbox and update tests to wait for positioning

Author: m-akinc

packages/nimble-components/src/combobox/testing/combobox.pageobject.ts

@@ -3,8 +3,8 @@ import type { Combobox } from '..';
 import { listOptionTag } from '../../list-option';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import {
-    waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../utilities/testing/component';
 import { slotTextContent } from '../../utilities/models/slot-text-content';
 
@@ -13,11 +13,6 @@ import { slotTextContent } from '../../utilities/models/slot-text-content';
  * of querying and interacting with the component during tests.
  */
 export class ComboboxPageObject {
-    private readonly regionLoadedListener = waitForEvent(
-        this.comboboxElement,
-        'loaded'
-    );
-
     public constructor(protected readonly comboboxElement: Combobox) {}
 
     /**
@@ -31,7 +26,7 @@ export class ComboboxPageObject {
      * Sets the input text and commits the value by pressing Enter. Will emit a 'change' event.
      */
     public async commitValue(text: string): Promise<void> {
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         this.setInputText(text);
         this.pressEnterKey();
     }
@@ -76,7 +71,7 @@ export class ComboboxPageObject {
      */
     public async clickAndWaitForOpen(): Promise<void> {
         this.clickCombobox();
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         await waitForUpdatesAsync();
         await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
     }
@@ -95,7 +90,7 @@ export class ComboboxPageObject {
      */
     public async clickDropdownButtonAndWaitForOpen(): Promise<void> {
         this.clickDropdownButton();
-        await this.waitForAnchoredRegionLoaded();
+        await this.waitForListboxPositioned();
         await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
     }
 
@@ -219,7 +214,14 @@ export class ComboboxPageObject {
         );
     }
 
-    private async waitForAnchoredRegionLoaded(): Promise<void> {
-        await this.regionLoadedListener;
+    /**
+     * @internal
+     */
+    public async waitForListboxPositioned(): Promise<void> {
+        await waitPredicate(
+            () => this.comboboxElement.region?.classList.contains(
+                'horizontal-center'
+            ) === true
+        );
     }
 }

packages/nimble-components/src/combobox/tests/combobox.spec.ts

@@ -508,7 +508,7 @@ describe('Combobox', () => {
         it('should set classes based on open, disabled, and position', async () => {
             const { element, connect, disconnect } = await setup();
             await connect();
-            await waitForUpdatesAsync();
+            await new ComboboxPageObject(element).waitForListboxPositioned();
 
             expect(element.classList.contains('open')).toBeTrue();
             expect(element.classList.contains('disabled')).toBeTrue();

packages/nimble-components/src/rich-text/mention-listbox/index.ts

@@ -40,7 +40,7 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @internal
      */
     @observable
-    public position?: DropdownPosition;
+    public availableViewportHeight = 0;
 
     /**
      * @internal
@@ -107,6 +107,7 @@ export class RichTextMentionListbox extends FoundationListbox {
      * @public
      */
     public show(options: MentionListboxShowOptions): void {
+        this.updateAvailableViewportHeight();
         this.filter = options.filter;
         this.anchorElement = options.anchorNode;
         this.setOpen(true);
@@ -282,6 +283,19 @@ export class RichTextMentionListbox extends FoundationListbox {
     private setOpen(value: boolean): void {
         this.open = value;
     }
+
+    private updateAvailableViewportHeight(): void {
+        const currentBox = this.getBoundingClientRect();
+        const viewportHeight = document.documentElement.getBoundingClientRect().height;
+        const availableSpaceAbove = Math.trunc(currentBox.top);
+        const availableSpaceBelow = Math.trunc(
+            viewportHeight - currentBox.bottom
+        );
+        this.availableViewportHeight = Math.max(
+            availableSpaceAbove,
+            availableSpaceBelow
+        );
+    }
 }
 
 const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({

packages/nimble-components/src/rich-text/mention-listbox/template.ts

@@ -3,19 +3,18 @@ import { Listbox } from '@ni/fast-foundation';
 import type { RichTextMentionListbox } from '.';
 import { anchoredRegionTag } from '../../anchored-region';
 import { filterNoResultsLabel } from '../../label-provider/core/label-tokens';
-import { DropdownPosition } from '../../patterns/dropdown/types';
 
 /* eslint-disable @typescript-eslint/indent */
 // prettier-ignore
 export const template = html<RichTextMentionListbox>`
     <template>
         <${anchoredRegionTag}
             ${ref('region')}
-            class="anchored-region"
+            class="anchored-region confined-to-view"
             fixed-placement
             auto-update-mode="auto"
-            vertical-default-position="${x => (x.position === DropdownPosition.above ? 'top' : 'bottom')}"
-            vertical-positioning-mode="${x => (!x.position ? 'dynamic' : 'locktodefault')}"
+            vertical-default-position="bottom"
+            vertical-positioning-mode="dynamic"
             horizontal-default-position="center"
             horizontal-positioning-mode="locktodefault"
             horizontal-scaling="anchor"
@@ -30,6 +29,7 @@ export const template = html<RichTextMentionListbox>`
                 role="listbox"
                 @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
                 ?disabled="${x => x.disabled}"
+                style="--ni-private-listbox-available-viewport-height: ${x => x.availableViewportHeight}px;"
                 ${ref('listbox')}
             >
                 <slot name="option"

packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts

@@ -4,8 +4,8 @@ import { waitForUpdatesAsync } from '../../../testing/async-helpers';
 import { type Fixture, fixture } from '../../../utilities/tests/fixture';
 import { listOptionTag } from '../../../list-option';
 import {
-    waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../../utilities/testing/component';
 import { checkFullyInViewport } from '../../../utilities/tests/intersection-observer';
 
@@ -49,12 +49,13 @@ describe('RichTextMentionListbox', () => {
     }
 
     async function showAndWaitForOpen(filter = ''): Promise<void> {
-        const regionLoadedPromise = waitForEvent(element, 'loaded');
         element.show({
             anchorNode: anchor,
             filter
         });
-        await regionLoadedPromise;
+        await waitPredicate(
+            () => element.region?.classList.contains('horizontal-center') === true
+        );
     }
 
     beforeEach(async () => {

packages/nimble-components/src/select/tests/select.spec.ts

@@ -12,7 +12,8 @@ import { checkFullyInViewport } from '../../utilities/tests/intersection-observe
 import { FilterMode, type SelectFilterInputEventDetail } from '../types';
 import {
     waitForEvent,
-    waitAnimationFrame
+    waitAnimationFrame,
+    waitPredicate
 } from '../../utilities/testing/component';
 import { filterSearchLabel } from '../../label-provider/core/label-tokens';
 import { ListOptionGroup, listOptionGroupTag } from '../../list-option-group';
@@ -107,9 +108,11 @@ async function setupWithGroups(): Promise<Fixture<Select>> {
 }
 
 async function clickAndWaitForOpen(select: Select): Promise<void> {
-    const regionLoadedPromise = waitForEvent(select, 'loaded');
     select.click();
-    await regionLoadedPromise;
+    await waitPredicate(
+        () => select.anchoredRegion?.classList.contains('horizontal-center')
+            === true
+    );
 }
 
 describe('Select', () => {
@@ -939,7 +942,6 @@ describe('Select', () => {
             await connect();
             element.focus();
             await clickAndWaitForOpen(element);
-            await waitForUpdatesAsync();
             await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
 
             expect(element.scrollableRegion.scrollTop).toBeGreaterThan(8000);

packages/nimble-components/src/utilities/testing/component.ts

@@ -79,3 +79,13 @@ export async function waitTimeout(ms = 0): Promise<void> {
         window.setTimeout(() => resolve(undefined), ms);
     });
 }
+
+/**
+ * Waits for a predicate function to return truthy value (polls in loop of waitForUpdatesAsync calls).
+ */
+export async function waitPredicate(predicate: () => boolean): Promise<void> {
+    while (!predicate()) {
+        // eslint-disable-next-line no-await-in-loop
+        await waitForUpdatesAsync();
+    }
+}