Fix #6929: relation map ignores selected autocomplete name

apps/client/src/widgets/note_wrapper.ts

@@ -19,25 +19,21 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
 
     setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
         this.noteContext = noteContext;
-
         this.refresh();
     }
 
     noteSwitchedAndActivatedEvent({ noteContext }: EventData<"setNoteContext">) {
         this.noteContext = noteContext;
-
         this.refresh();
     }
 
     noteSwitchedEvent({ noteContext }: EventData<"setNoteContext">) {
         this.noteContext = noteContext;
-
         this.refresh();
     }
 
     activeContextChangedEvent({ noteContext }: EventData<"setNoteContext">) {
         this.noteContext = noteContext;
-
         this.refresh();
     }
 

apps/client/src/widgets/type_widgets/relation_map/RelationMap.spec.ts

@@ -0,0 +1,73 @@
+import $ from "jquery";
+import { describe, expect, it, vi } from "vitest";
+
+import { setupAnswerEventHandlers } from "./RelationMap.js";
+
+vi.mock("../../../services/utils.js", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("../../../services/utils.js")>();
+    return {
+        ...actual,
+        default: {
+            ...actual.default,
+            filterAttributeName: vi.fn((val: string) => val)
+        }
+    };
+});
+
+describe("RelationMap - $answer event synchronization", () => {
+
+    it("dispatches input event with bubbles:true when Enter is pressed", () => {
+        const $answer = $("<input type='text' />");
+        const dispatchSpy = vi.spyOn($answer[0], "dispatchEvent");
+
+        setupAnswerEventHandlers($answer);
+        $answer.trigger($.Event("keydown", { key: "Enter" }));
+
+        expect(dispatchSpy).toHaveBeenCalledWith(
+            expect.objectContaining({ type: "input", bubbles: true })
+        );
+    });
+
+    it("dispatches input event with bubbles:true when input loses focus (blur)", () => {
+        const $answer = $("<input type='text' />");
+        const dispatchSpy = vi.spyOn($answer[0], "dispatchEvent");
+
+        setupAnswerEventHandlers($answer);
+        $answer.trigger("blur");
+
+        expect(dispatchSpy).toHaveBeenCalledWith(
+            expect.objectContaining({ type: "input", bubbles: true })
+        );
+    });
+
+    it("does not dispatch input event for non-Enter keys", () => {
+        const $answer = $("<input type='text' />");
+        const dispatchSpy = vi.spyOn($answer[0], "dispatchEvent");
+
+        setupAnswerEventHandlers($answer);
+        $answer.trigger($.Event("keydown", { key: "a" }));
+        $answer.trigger($.Event("keydown", { key: "Tab" }));
+        $answer.trigger($.Event("keydown", { key: "Escape" }));
+
+        const inputEvents = dispatchSpy.mock.calls
+            .map(([e]) => e as Event)
+            .filter((e) => e.type === "input" && e.bubbles === true);
+        expect(inputEvents).toHaveLength(0);
+    });
+
+    it("input event bubbles up to parent element", () => {
+        const $answer = $("<input type='text' />");
+        const parent = document.createElement("div");
+        parent.appendChild($answer[0]);
+
+        const parentListener = vi.fn();
+        parent.addEventListener("input", parentListener);
+
+        setupAnswerEventHandlers($answer);
+        $answer.trigger($.Event("keydown", { key: "Enter" }));
+
+        expect(parentListener).toHaveBeenCalledOnce();
+        expect(parentListener.mock.calls[0][0]).toMatchObject({ type: "input", bubbles: true });
+    });
+
+});

apps/client/src/widgets/type_widgets/relation_map/RelationMap.tsx

@@ -402,6 +402,18 @@ function useNoteDragging({ containerRef, mapApiRef }: {
     return dragProps;
 }
 
+export function setupAnswerEventHandlers($answer: JQuery<HTMLElement>) {
+    $answer.on("keydown", (e) => {
+        if (e.key === "Enter") {
+            $answer[0].dispatchEvent(new Event("input", { bubbles: true }));
+        }
+    });
+
+    $answer.on("blur", () => {
+        $answer[0].dispatchEvent(new Event("input", { bubbles: true }));
+    });
+}
+
 function useRelationCreation({ mapApiRef, jsPlumbApiRef }: { mapApiRef: RefObject<RelationMapApi>, jsPlumbApiRef: RefObject<jsPlumbInstance> }) {
     const connectionCallback = useCallback(async (info: OnConnectionBindInfo, originalEvent: Event) => {
         const connection = info.connection;

apps/client/src/widgets/type_widgets/relation_map/utils.ts

@@ -50,6 +50,16 @@ export function promptForRelationName(defaultValue?: string): Promise<string | n
                 $answer.val(attrName);
             });
 
+            $answer.on("keydown", (e) => {
+                if (e.key === "Enter") {
+                    $answer[0].dispatchEvent(new Event("input", { bubbles: true }));
+                }
+            });
+
+            $answer.on("blur", () => {
+                $answer[0].dispatchEvent(new Event("input", { bubbles: true }));
+            });
+
             attribute_autocomplete.initAttributeNameAutocomplete({
                 $el: $answer,
                 attributeType: "relation",