From 82fccade528cdbac80a2c54e05c58430d878f83a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Fri, 20 Dec 2024 11:55:37 +0100
Subject: [PATCH] Ensure mentions suggestions are displayed when clicking
 textarea

---
 src/sidebar/components/MarkdownEditor.tsx     | 21 ++++++++++---------
 .../components/test/MarkdownEditor-test.js    | 21 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/sidebar/components/MarkdownEditor.tsx b/src/sidebar/components/MarkdownEditor.tsx
index d3b6502c317..a587638693d 100644
--- a/src/sidebar/components/MarkdownEditor.tsx
+++ b/src/sidebar/components/MarkdownEditor.tsx
@@ -203,25 +203,26 @@ function TextArea({
 
     const textarea = textareaRef.current!;
     const listenerCollection = new ListenerCollection();
+    const checkForMentionAtCaret = () => {
+      const term = termBeforePosition(textarea.value, textarea.selectionStart);
+      setPopoverOpen(term.startsWith('@'));
+    };
 
     // We listen for `keyup` to make sure the text in the textarea reflects the
     // just-pressed key when we evaluate it
     listenerCollection.add(textarea, 'keyup', e => {
       // `Esc` key is used to close the popover. Do nothing and let users close
       // it that way, even if the caret is in a mention
-      if (e.key === 'Escape') {
-        return;
+      if (e.key !== 'Escape') {
+        checkForMentionAtCaret();
       }
-      setPopoverOpen(
-        termBeforePosition(textarea.value, textarea.selectionStart).startsWith(
-          '@',
-        ),
-      );
     });
 
-    return () => {
-      listenerCollection.removeAll();
-    };
+    // When clicking the textarea it's possible the caret is moved "into" a
+    // mention, so we check if the popover should be opened
+    listenerCollection.add(textarea, 'click', checkForMentionAtCaret);
+
+    return () => listenerCollection.removeAll();
   }, [atMentionsEnabled, popoverOpen, textareaRef]);
 
   return (
diff --git a/src/sidebar/components/test/MarkdownEditor-test.js b/src/sidebar/components/test/MarkdownEditor-test.js
index 88982d56d4d..b8efe9ca920 100644
--- a/src/sidebar/components/test/MarkdownEditor-test.js
+++ b/src/sidebar/components/test/MarkdownEditor-test.js
@@ -438,7 +438,6 @@ describe('MarkdownEditor', () => {
         text,
         atMentionsEnabled: true,
       });
-
       const textarea = wrapper.find('textarea');
       const textareaDOMNode = textarea.getDOMNode();
 
@@ -472,6 +471,26 @@ describe('MarkdownEditor', () => {
       typeInTextarea(wrapper, '@johndoe', 'Escape');
       assert.isFalse(wrapper.find('Popover').prop('open'));
     });
+
+    it('opens popover when clicking textarea and moving the caret to a mention', () => {
+      const text = 'text @johndoe more text';
+      const wrapper = createConnectedComponent({
+        text,
+        atMentionsEnabled: true,
+      });
+      const textarea = wrapper.find('textarea');
+      const textareaDOMNode = textarea.getDOMNode();
+
+      // Popover is initially closed
+      assert.isFalse(wrapper.find('Popover').prop('open'));
+
+      // Move cursor to overlap with the mention
+      textareaDOMNode.selectionStart = text.indexOf('@') + 1;
+      act(() => textareaDOMNode.dispatchEvent(new MouseEvent('click')));
+      wrapper.update();
+
+      assert.isTrue(wrapper.find('Popover').prop('open'));
+    });
   });
 
   it(