fix: Image popover steals cursor focus

src/rich-text/node-views/image.ts

@@ -33,22 +33,9 @@ export class ImageView implements NodeView {
             this.preventClose(event)
         );
     }
-    /**
-     * We want to trigger Stacks' showing and hiding of popovers whenever an image is considered
-     * "selected" by prosemirror. This can happen by mouse-clicking or arrowing through the editor
-     */
+
     selectNode(): void {
         this.img.classList.add("bs-ring");
-        this.selectionActive = true;
-        // tell Stacks to hide the popover
-        this.img.dispatchEvent(new Event("image-popover-show"));
-
-        const inputFields = this.form.querySelectorAll("input");
-        if (inputFields.length > 0) {
-            inputFields[0].focus({
-                preventScroll: true,
-            });
-        }
     }
 
     deselectNode(): void {
@@ -87,6 +74,8 @@ export class ImageView implements NodeView {
         if (node.attrs.alt) img.alt = node.attrs.alt as string;
         if (node.attrs.title) img.title = node.attrs.title as string;
 
+        img.onclick = () => this.handleClick();
+
         return img;
     }
 
@@ -158,4 +147,20 @@ export class ImageView implements NodeView {
             event.preventDefault();
         }
     }
+
+    /**
+     * We want to trigger Stacks' showing and hiding of popovers whenever an image is clicked
+     */
+    private handleClick(): void {
+        this.selectionActive = true;
+        // tell Stacks to hide the popover
+        this.img.dispatchEvent(new Event("image-popover-show"));
+
+        const inputFields = this.form.querySelectorAll("input");
+        if (inputFields.length > 0) {
+            inputFields[0].focus({
+                preventScroll: true,
+            });
+        }
+    }
 }

test/rich-text/node-views/image.e2e.test.ts

@@ -52,4 +52,31 @@ test.describe.serial("rich-text image nodeview", () => {
             )
         ).toBe(false);
     });
+
+    test("should not show image popover when navigating with left/right arrow keys", async () => {
+        await enterTextAsMarkdown(
+            page,
+            "![an image](https://localhost/some-image)"
+        );
+
+        // move over the image from the left side
+        await page.keyboard.press("ArrowRight");
+        await page.keyboard.press("ArrowRight");
+
+        expect(
+            await page.$eval(imagePopoverSelector, (el) =>
+                el.classList.contains("is-visible")
+            )
+        ).toBe(false);
+
+        // move over the image from the right side
+        await page.keyboard.press("ArrowLeft");
+        await page.keyboard.press("ArrowLeft");
+
+        expect(
+            await page.$eval(imagePopoverSelector, (el) =>
+                el.classList.contains("is-visible")
+            )
+        ).toBe(false);
+    });
 });