Ensure mentions suggestions are displayed when clicking textarea

hypothesis · Dec 20, 2024 · 3456e01 · 3456e01
1 parent 01d3973
commit 3456e01
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git 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 checkShouldOpenPopover = () => {
+      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') {
+        checkShouldOpenPopover();
       }
-      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', checkShouldOpenPopover);
+
+    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
@@ -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 KeyboardEvent('click')));
+      wrapper.update();
+
+      assert.isTrue(wrapper.find('Popover').prop('open'));
+    });
   });
 
   it(