From 222571d3842740946fc1607e9111216d8d94732f Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 12 Mar 2024 20:20:13 -0500
Subject: [PATCH 1/3] Fix intermittent RichTextMentionListbox test

---
 .../tests/mention-listbox.spec.ts             | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
index efb226a31f..11e75bd058 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
@@ -1,8 +1,7 @@
-import { html, repeat } from '@microsoft/fast-element';
+import { html, ref, repeat } from '@microsoft/fast-element';
 import { RichTextMentionListbox, richTextMentionListboxTag } from '..';
 import { waitForUpdatesAsync } from '../../../testing/async-helpers';
 import { type Fixture, fixture } from '../../../utilities/tests/fixture';
-import { waitAnimationFrame } from '../../../utilities/tests/component';
 import { listOptionTag } from '../../../list-option';
 
 describe('RichTextMentionListbox', () => {
@@ -18,39 +17,47 @@ describe('RichTextMentionListbox', () => {
         ).toBeInstanceOf(RichTextMentionListbox);
     });
 
-    async function setup500Options(): Promise<Fixture<RichTextMentionListbox>> {
+    class Model {
+        public mentionListbox!: RichTextMentionListbox;
+        public anchorDiv!: HTMLDivElement;
+    }
+
+    async function setup500Options(source: Model): Promise<Fixture<RichTextMentionListbox>> {
         // prettier-ignore
-        const viewTemplate = html`
-            <${richTextMentionListboxTag}>
-                ${repeat(() => [...Array(500).keys()], html<number>`
-                    <${listOptionTag} value="${x => x}">${x => x}</${listOptionTag}>`)}
-            </${richTextMentionListboxTag}>
-        `;
-        return fixture<RichTextMentionListbox>(viewTemplate);
+        return fixture<RichTextMentionListbox>(
+            html<Model>`
+            <div>
+                <div ${ref('anchorDiv')}></div>
+                <${richTextMentionListboxTag} ${ref('mentionListbox')}>
+                    ${repeat(() => [...Array(500).keys()], html<number>`
+                        <${listOptionTag} value="${x => x}">${x => x}</${listOptionTag}>`)}
+                </${richTextMentionListboxTag}>
+            </div>`,
+            { source }
+        );
     }
 
     async function waitForSelectionUpdateAsync(): Promise<void> {
         await waitForUpdatesAsync();
         await waitForUpdatesAsync();
-        await waitAnimationFrame(); // necessary because scrolling is queued with requestAnimationFrame
     }
 
-    // Intermittent test. See tech debt issue: https://github.com/ni/nimble/issues/1891
-    xit('should scroll the selected option into view when opened', async () => {
-        const { element, connect, disconnect } = await setup500Options();
+    it('should scroll the selected option into view when opened', async () => {
+        const model = new Model();
+        const { connect, disconnect } = await setup500Options(model);
         await connect();
-        element.show({
-            anchorNode: document.documentElement,
+        model.mentionListbox.show({
+            anchorNode: model.anchorDiv,
             filter: ''
         });
         await waitForSelectionUpdateAsync(); // showing filters the options and modifies the selection
 
-        element.selectedIndex = 300;
+        model.mentionListbox.selectedIndex = 300;
         await waitForSelectionUpdateAsync();
-        const listbox = element.region!.querySelector('.listbox')!;
+        const listbox = model.mentionListbox.region!.querySelector('.listbox')!;
         expect(listbox.scrollTop).toBeGreaterThan(8000);
 
-        element.selectedIndex = 0;
+        model.mentionListbox.selectedIndex = 0;
         await waitForSelectionUpdateAsync();
         expect(listbox.scrollTop).toBeCloseTo(4);
 

From 26e5d413017439fac56baf82ccdb9c2e01a5c7e0 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 12 Mar 2024 20:20:40 -0500
Subject: [PATCH 2/3] Change files

---
 ...le-components-dec15c49-740a-482b-9b46-a2067d5e0f76.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@ni-nimble-components-dec15c49-740a-482b-9b46-a2067d5e0f76.json

diff --git a/change/@ni-nimble-components-dec15c49-740a-482b-9b46-a2067d5e0f76.json b/change/@ni-nimble-components-dec15c49-740a-482b-9b46-a2067d5e0f76.json
new file mode 100644
index 0000000000..f22c2acd2b
--- /dev/null
+++ b/change/@ni-nimble-components-dec15c49-740a-482b-9b46-a2067d5e0f76.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix intermittent RichTextMentionListbox test",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

From 09ea7c1128a8f784b8a41bdfb45ad2b9c7df5195 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 13 Mar 2024 12:58:15 -0500
Subject: [PATCH 3/3] Prettier

---
 .../rich-text/mention-listbox/tests/mention-listbox.spec.ts   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
index 11e75bd058..09d9d5d10d 100644
--- a/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
+++ b/packages/nimble-components/src/rich-text/mention-listbox/tests/mention-listbox.spec.ts
@@ -22,7 +22,9 @@ describe('RichTextMentionListbox', () => {
         public anchorDiv!: HTMLDivElement;
     }
 
-    async function setup500Options(source: Model): Promise<Fixture<RichTextMentionListbox>> {
+    async function setup500Options(
+        source: Model
+    ): Promise<Fixture<RichTextMentionListbox>> {
         // prettier-ignore
         return fixture<RichTextMentionListbox>(
             html<Model>`