Rich Text Editor | Fix for Editor's blinking caret disappearing issue in Firefox browser

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

@@ -101,6 +101,7 @@ export class RichTextEditor extends FoundationElement {
      */
     public boldButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleBold().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -110,6 +111,7 @@ export class RichTextEditor extends FoundationElement {
     public boldButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleBold().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -121,6 +123,7 @@ export class RichTextEditor extends FoundationElement {
      */
     public italicsButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleItalic().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -130,6 +133,7 @@ export class RichTextEditor extends FoundationElement {
     public italicsButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleItalic().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -141,6 +145,7 @@ export class RichTextEditor extends FoundationElement {
      */
     public bulletListButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleBulletList().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -150,6 +155,7 @@ export class RichTextEditor extends FoundationElement {
     public bulletListButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleBulletList().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -161,6 +167,7 @@ export class RichTextEditor extends FoundationElement {
      */
     public numberedListButtonClick(): void {
         this.tiptapEditor.chain().focus().toggleOrderedList().run();
+        this.forceFocusEditor();
     }
 
     /**
@@ -170,6 +177,7 @@ export class RichTextEditor extends FoundationElement {
     public numberedListButtonKeyDown(event: KeyboardEvent): boolean {
         if (this.keyActivatesButton(event)) {
             this.tiptapEditor.chain().focus().toggleOrderedList().run();
+            this.forceFocusEditor();
             return false;
         }
         return true;
@@ -347,6 +355,15 @@ export class RichTextEditor extends FoundationElement {
                 return false;
         }
     }
+
+    // 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();
+    }
 }
 
 const nimbleRichTextEditor = RichTextEditor.compose({

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

@@ -156,22 +156,30 @@ export class RichTextEditorPageObject {
             .map(el => el.textContent || '');
     }
 
-    private getEditorSection(): Element | null | undefined {
-        return this.richTextEditorElement.shadowRoot?.querySelector('.editor');
+    public getFormattingButton(
+        index: ToolbarButton
+    ): ToggleButton | null | undefined {
+        const buttons: NodeListOf<ToggleButton> = this.richTextEditorElement.shadowRoot!.querySelectorAll(
+            'nimble-toggle-button'
+        );
+        return buttons[index];
+    }
+
+    public getActiveElementFromDocument(): Element | null {
+        return document.activeElement;
     }
 
-    private getTiptapEditor(): Element | null | undefined {
+    public getShadowDomActiveElement(): Element | null | undefined {
+        return document.activeElement?.shadowRoot?.activeElement;
+    }
+
+    public getTiptapEditor(): Element | null | undefined {
         return this.richTextEditorElement.shadowRoot?.querySelector(
             '.ProseMirror'
         );
     }
 
-    private getFormattingButton(
-        index: ToolbarButton
-    ): ToggleButton | null | undefined {
-        const buttons: NodeListOf<ToggleButton> = this.richTextEditorElement.shadowRoot!.querySelectorAll(
-            'nimble-toggle-button'
-        );
-        return buttons[index];
+    private getEditorSection(): Element | null | undefined {
+        return this.richTextEditorElement.shadowRoot?.querySelector('.editor');
     }
 }

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

@@ -103,6 +103,16 @@ describe('RichTextEditor', () => {
         expect(okButtonSpy).toHaveBeenCalledTimes(1);
     });
 
+    it('Should return editor as active element when clicking formatting button', async () => {
+        await pageObject.clickFooterButton(ToolbarButton.bulletList);
+        expect(pageObject.getActiveElementFromDocument()).toBe(element);
+        await pageObject.clickFooterButton(ToolbarButton.numberedList);
+        expect(pageObject.getActiveElementFromDocument()).toBe(element);
+        expect(pageObject.getShadowDomActiveElement()).toBe(
+            pageObject.getTiptapEditor()
+        );
+    });
+
     const formattingButtons: {
         name: string,
         toolbarButtonIndex: ToolbarButton,