Let empty mention dropdown release Enter

Author: dannon

client/src/components/ChatGXY/ChatInput.test.ts

@@ -10,18 +10,21 @@ vi.mock("@/stores/historyItemsStore", () => ({
     useHistoryItemsStore: () => ({ getHistoryItems: () => [] }),
 }));
 
-function mountInput(props: Record<string, unknown> = {}) {
+function mountInput(
+    props: Record<string, unknown> = {},
+    stubs: Record<string, boolean> = {
+        FontAwesomeIcon: true,
+        LoadingSpan: true,
+        MentionDropdown: true,
+    },
+) {
     return mount(ChatInput as any, {
         propsData: {
             value: "",
             busy: false,
             ...props,
         },
-        stubs: {
-            FontAwesomeIcon: true,
-            LoadingSpan: true,
-            MentionDropdown: true,
-        },
+        stubs,
     });
 }
 
@@ -114,6 +117,36 @@ describe("ChatInput", () => {
             await wrapper.find("textarea").trigger("keydown.enter", { shiftKey: true });
             expect(wrapper.emitted("submit")).toBeFalsy();
         });
+
+        it("emits submit on Enter when the mention dropdown has no matches", async () => {
+            const value = "@dataset:nope";
+            const wrapper = mountInput({ value }, { FontAwesomeIcon: true, LoadingSpan: true });
+            const textarea = wrapper.find("textarea");
+            const el = textarea.element as HTMLTextAreaElement;
+            el.selectionStart = value.length;
+            el.selectionEnd = value.length;
+
+            await textarea.trigger("input");
+            await textarea.trigger("keydown.enter");
+
+            expect(wrapper.emitted("submit")).toBeTruthy();
+        });
+
+        it("closes an empty mention dropdown on Escape", async () => {
+            const value = "@dataset:nope";
+            const wrapper = mountInput({ value }, { FontAwesomeIcon: true, LoadingSpan: true });
+            const textarea = wrapper.find("textarea");
+            const el = textarea.element as HTMLTextAreaElement;
+            el.selectionStart = value.length;
+            el.selectionEnd = value.length;
+
+            await textarea.trigger("input");
+            expect(wrapper.find(".mention-dropdown").attributes("style") ?? "").not.toContain("display: none");
+
+            await textarea.trigger("keydown", { key: "Escape" });
+
+            expect(wrapper.find(".mention-dropdown").attributes("style") ?? "").toContain("display: none");
+        });
     });
 
     describe("busy state UI", () => {

client/src/components/ChatGXY/ChatInput.vue

@@ -45,8 +45,10 @@ const DROPDOWN_KEYS = new Set(["ArrowDown", "ArrowUp", "Tab", "Escape", "Enter"]
 function onKeydown(event: KeyboardEvent) {
     if (mentionTrigger.value && dropdownRef.value && DROPDOWN_KEYS.has(event.key)) {
         if (event.key !== "Enter" || !event.shiftKey) {
-            dropdownRef.value.handleKeydown(event);
-            return;
+            const handled = dropdownRef.value.handleKeydown(event);
+            if (handled) {
+                return;
+            }
         }
     }
 

client/src/components/ChatGXY/MentionDropdown.vue

@@ -140,32 +140,43 @@ function handleSelect(item: MenuItem) {
     }
 }
 
-function handleKeydown(event: KeyboardEvent) {
+function handleKeydown(event: KeyboardEvent): boolean {
     if (!props.visible) {
-        return;
+        return false;
     }
 
     if (menuItems.value.length === 0) {
-        return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            emit("close");
+            return true;
+        }
+        return false;
     }
 
     if (event.key === "ArrowDown") {
         event.preventDefault();
         selectedIndex.value = (selectedIndex.value + 1) % menuItems.value.length;
+        return true;
     } else if (event.key === "ArrowUp") {
         event.preventDefault();
         selectedIndex.value = (selectedIndex.value - 1 + menuItems.value.length) % menuItems.value.length;
+        return true;
     } else if (event.key === "Enter" || event.key === "Tab") {
         event.preventDefault();
         event.stopPropagation();
         const item = menuItems.value[selectedIndex.value];
         if (item) {
             handleSelect(item);
         }
+        return true;
     } else if (event.key === "Escape") {
         event.preventDefault();
         emit("close");
+        return true;
     }
+
+    return false;
 }
 
 function updatePosition() {