From bac519359193b6a8d6353b4271d78ebd2a005736 Mon Sep 17 00:00:00 2001
From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com>
Date: Thu, 3 Oct 2024 17:28:13 +0530
Subject: [PATCH] Focusing the editor before clicking from the options

---
 .../editor/testing/rich-text-editor.pageobject.ts          | 4 ++++
 .../editor/tests/rich-text-editor-mention.spec.ts          | 7 ++++---
 .../src/rich-text/models/tests/markdown-serializer.spec.ts | 2 ++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts
index 1863bd4b87..7fc113f664 100644
--- a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts
+++ b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts
@@ -439,6 +439,10 @@ export class RichTextEditorPageObject {
     }
 
     public async clickMentionListboxOption(index: number): Promise<void> {
+        if (this.isMentionListboxOpened()) {
+            this.richTextEditorElement.tiptapEditor.commands.focus();
+            await waitForUpdatesAsync();
+        }
         const listOption = this.getAllListItemsInMentionBox()[index];
         listOption?.click();
         await waitForUpdatesAsync();
diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts
index 81cb2bab97..feca12617f 100644
--- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts
+++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts
@@ -1566,9 +1566,10 @@ describe('RichTextEditorMentionListbox', () => {
                         'username1',
                         'username2'
                     ]);
-                    // expect(pageObject.isMentionListboxOpened()).toBeTrue();
+                    expect(pageObject.isMentionListboxOpened()).toBeTrue();
 
-                    await pageObject.clickMentionListboxOption(0);
+                    // await pageObject.clickMentionListboxOption(0);
+                    await pageObject.sliceEditorContent(0, 2);
 
                     await appendTestMentionConfiguration(element, [
                         { key: 'test:1', displayName: 'testname1' },
@@ -1581,7 +1582,7 @@ describe('RichTextEditorMentionListbox', () => {
                         'testname1',
                         'testname2'
                     ]);
-                    // expect(pageObject.isMentionListboxOpened()).toBeTrue();
+                    expect(pageObject.isMentionListboxOpened()).toBeTrue();
                 }
             );
         }
diff --git a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts
index c541e8c9f5..df966e2078 100644
--- a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts
+++ b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts
@@ -360,7 +360,9 @@ Plain text 3`);
                 await appendUserMentionConfiguration(element, [
                     { key: 'user:1', displayName: 'username1' }
                 ]);
+
                 await commitFirstMentionBoxOptionIntoEditor('@');
+
                 expect(element.getMarkdown()).toEqual('<user:1> ');
             });
         }