refactor: fix enter can't execute action in dialog

apps/client/src/services/attribute_autocomplete.ts

@@ -200,10 +200,16 @@ function initAttributeNameAutocomplete({ $el, attributeType, open, onValueChange
             }, 50);
         },
         onKeyDown(e, handlers) {
-            if (e.key === "Enter" && isPanelOpen && hasActiveItem) {
-                // Prevent the enter key from propagating to parent dialogs
-                // (which might interpret it as "submit" or "save and close")
-                e.stopPropagation();
+            if (e.key === "Enter") {
+                if (isPanelOpen && hasActiveItem) {
+                    // Prevent the enter key from propagating to parent dialogs
+                    // (which might interpret it as "submit" or "save and close")
+                    e.stopPropagation();
+                } else if (!isPanelOpen) {
+                    // Panel is closed. Do not pass Enter to autocomplete-core
+                    // so native HTML form submit handlers can run.
+                    return;
+                }
             }
             handlers.onKeyDown(e as any);
         }
@@ -386,8 +392,12 @@ function initLabelValueAutocomplete({ $el, open, nameCallback, onValueChange }:
             }, 50);
         },
         onKeyDown(e, handlers) {
-            if (e.key === "Enter" && isPanelOpen && hasActiveItem) {
-                e.stopPropagation();
+            if (e.key === "Enter") {
+                if (isPanelOpen && hasActiveItem) {
+                    e.stopPropagation();
+                } else if (!isPanelOpen) {
+                    return; // Let native submit form bubbling happen
+                }
             }
             handlers.onKeyDown(e as any);
         }

apps/client/src/services/note_autocomplete.ts

@@ -702,7 +702,7 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
     const onCompositionStart = () => {
         isComposingInput = true;
     };
-    const onCompositionEnd = (e: CompositionEvent) => {
+    const onCompositionEnd = (e: any) => {
         isComposingInput = false;
         rerunQuery(inputEl.value);
     };
@@ -755,14 +755,21 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
                 return;
             }
 
+            if (e.key === "Enter" && !wasPanelOpen) {
+                // Do not pass the Enter key to autocomplete-core if the panel is closed.
+                // This prevents `preventDefault()` from being called inappropriately and
+                // allows the native form submission to work.
+                return;
+            }
+
             if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                 shouldMirrorActiveItemToInput = true;
             }
             handlers.onKeyDown(e as any);
         },
         extraBindings: [
-            { type: "compositionstart", listener: onCompositionStart },
-            { type: "compositionend", listener: onCompositionEnd }
+            { type: "compositionstart", listener: onCompositionStart as ((event: Event) => void) },
+            { type: "compositionend", listener: onCompositionEnd as ((event: Event) => void) }
         ]
     });
 

apps/client/src/widgets/dialogs/prompt.tsx

@@ -1,11 +1,12 @@
 import { useRef, useState } from "preact/hooks";
+
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
-import Modal from "../react/Modal";
-import FormTextBox from "../react/FormTextBox";
 import FormGroup from "../react/FormGroup";
-import { refToJQuerySelector } from "../react/react_utils";
+import FormTextBox from "../react/FormTextBox";
 import { useTriliumEvent } from "../react/hooks";
+import Modal from "../react/Modal";
+import { refToJQuerySelector } from "../react/react_utils";
 
 // JQuery here is maintained for compatibility with existing code.
 interface ShownCallbackData {
@@ -24,7 +25,6 @@ export interface PromptDialogOptions {
     shown?: PromptShownDialogCallback;
     callback?: (value: string | null) => void;
     readOnly?: boolean;
-    submitWithCtrlEnter?: boolean;
 }
 
 export default function PromptDialog() {
@@ -41,7 +41,7 @@ export default function PromptDialog() {
         opts.current = newOpts;
         setValue(newOpts.defaultValue ?? "");
         setShown(true);
-    })
+    });
 
     return (
         <Modal
@@ -61,7 +61,7 @@ export default function PromptDialog() {
                 answerRef.current?.select();
             }}
             onSubmit={() => {
-                submitValue.current = value;
+                submitValue.current = answerRef.current?.value || value;
                 setShown(false);
             }}
             onHidden={() => {
@@ -70,7 +70,7 @@ export default function PromptDialog() {
                 submitValue.current = null;
                 opts.current = undefined;
             }}
-            footer={<Button text={t("prompt.ok")} keyboardShortcut={opts.current?.submitWithCtrlEnter ? "ctrl+return" : "Enter"} kind="primary" />}
+            footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" kind="primary" />}
             show={shown}
             stackable
         >
@@ -78,14 +78,6 @@ export default function PromptDialog() {
                 <FormTextBox
                     inputRef={answerRef}
                     currentValue={value} onChange={setValue}
-                    readOnly={opts.current?.readOnly}
-                    onKeyDown={(e: KeyboardEvent) => {
-                        if (opts.current?.submitWithCtrlEnter && (e.ctrlKey || e.metaKey) && e.key === "Enter") {
-                            e.preventDefault();
-                            submitValue.current = answerRef.current?.value || value;
-                            setShown(false);
-                        }
-                    }}
                 />
             </FormGroup>
         </Modal>

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

@@ -416,7 +416,6 @@ function useRelationCreation({ mapApiRef, jsPlumbApiRef }: { mapApiRef: RefObjec
         if (!originalEvent || !mapApiRef.current) return;
 
         const name = await dialog.prompt({
-            submitWithCtrlEnter: true,
             message: t("relation_map.specify_new_relation_name"),
             shown: ({ $answer }) => {
                 if (!$answer) {