Rich Text Editor | Fix for Editor's blinking caret disappearing issue…

… in Firefox browser (#1455)

# Pull Request

## 🤨 Rationale

This PR contains workaround for resolves
#1454 Firefox issue when the editor
gets focused, the blinking caret will be visible until we click format
buttons (Bold, Italic ...). But once any of the buttons are clicked, the
editor internally has its focus but the blinking caret disappears.

Issue Link : #1454

## 👩‍💻 Implementation

- Triggering `Blur()` and setting `focus()` in the editor will make the
caret re-appears when clicking the formatting buttons.

## 🧪 Testing

- Verified the caret visibility in the Firefox browser when clicking on
the format button. Since Firefox is reporting the editor as an active
element even though Caret is not rendered, manually verified this
behavior.
- Added a test case to verify the active element in the browser
especially when clicking the format button.


## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Aagash Raaj <[email protected]>

change/@ni-nimble-components-46b1fdfb-63b3-4a04-ac71-1124855a4e45.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix for Firefox caret disappearing issue",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/rich-text-editor/index.ts

@@ -220,6 +220,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
      */
     public boldButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleBold().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -229,6 +230,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
     public boldButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleBold().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -240,6 +242,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
      */
     public italicsButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleItalic().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -249,6 +252,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
     public italicsButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleItalic().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -260,6 +264,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
      */
     public bulletListButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleBulletList().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -269,6 +274,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
     public bulletListButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleBulletList().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -280,6 +286,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
      */
     public numberedListButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleOrderedList().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -289,6 +296,7 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
     public numberedListButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleOrderedList().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -546,6 +554,15 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
             }
         });
     }
+
+    // In Firefox browser, once the editor gets focused, the blinking caret will be visible until we click format buttons (Bold, Italic ...) in the Firefox browser (changing focus).
+    // But once any of the toolbar button is clicked, editor internally has its focus but the blinking caret disappears.
+    // As a workaround, manually triggering blur and setting focus on editor makes the blinking caret to re-appear.
+    // Mozilla issue https://bugzilla.mozilla.org/show_bug.cgi?id=1496769 tracks removal of this workaround.
+    private forceFocusEditor(): void {
+        this.tiptapEditor.commands.blur();
+        this.tiptapEditor.commands.focus();
+    }
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/nimble-components/src/rich-text-editor/testing/rich-text-editor.pageobject.ts

@@ -136,6 +136,14 @@ export class RichTextEditorPageObject {
             .map(el => el.textContent || '');
     }
 
+    public isRichTextEditorActiveElement(): boolean {
+        return (
+            document.activeElement === this.richTextEditorElement
+            && document.activeElement?.shadowRoot?.activeElement
+                === this.getTiptapEditor()
+        );
+    }
+
     public getEditorTabIndex(): string {
         return this.getTiptapEditor()?.getAttribute('tabindex') ?? '';
     }

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

@@ -132,6 +132,12 @@ describe('RichTextEditor', () => {
         expect(okButtonSpy).toHaveBeenCalledTimes(1);
     });
 
+    it('Should return editor as active element after clicking formatting button', async () => {
+        await pageObject.setEditorTextContent('Sample Text');
+        await pageObject.clickFooterButton(ToolbarButton.bulletList);
+        expect(pageObject.isRichTextEditorActiveElement()).toBeTrue();
+    });
+
     const formattingButtons: {
         name: string,
         toolbarButtonIndex: ToolbarButton,