[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX] Pressing enter on the object selector search input submits the form instead of searching

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
90351877 by Merci Jacob at 2025-10-01T20:45:17+00:00
[FIX] Pressing enter on the object selector search input submits the form instead of searching
---
* move the enter key press handler to a sharable function

* inherit implementation from !8078

* correctly use implicit submission and correct key related event handlers

* add unit test

* [FIX] Pressing enter on the object selector search input submits the form instead of searching

See merge request tikiwiki/tiki!8519

- - - - -


5 changed files:

- lib/jquery_tiki/tiki-jquery.js
- + src/js/vue-widgets/element-plus-ui/src/helpers/shared/enterKeypressHandler.js
- src/js/vue-widgets/element-plus-ui/src/tests/utils/applyInput.test.js
- src/js/vue-widgets/element-plus-ui/src/utils/applyAutocomplete.js
- src/js/vue-widgets/element-plus-ui/src/utils/applyInput.js


Changes:

=====================================
lib/jquery_tiki/tiki-jquery.js
=====================================
@@ -2114,7 +2114,7 @@ $.fn.tiki = function(func) {
                 });
             });
 
-            $filter.keypress(function (e) {
+            $filter.on('keyup', (e) => {
                 if (e.which === 13) {
                     e.preventDefault();
                     $search.trigger("click");
@@ -2205,7 +2205,7 @@ $.fn.tiki = function(func) {
                 triggerReady();
             }
 
-            $filter.keypress(function (e) {
+            $filter.on('keyup', (e) => {
                 if (e.which === 13) {
                     e.preventDefault();
                     $search.trigger("click");


=====================================
src/js/vue-widgets/element-plus-ui/src/helpers/shared/enterKeypressHandler.js
=====================================
@@ -0,0 +1,17 @@
+export default function (originalElement, elementPlusUi) {
+    const $form = originalElement.closest("form");
+    if ($form.length) {
+        originalElement.val(elementPlusUi.val());
+        const blockingInputCount = $form[0].querySelectorAll(
+            'input[type="text"], input[type="search"], input[type="url"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], input[type="number"]'
+        ).length;
+        if (blockingInputCount <= 1) {
+            const submitButton = $form.find('button[type="submit"], input[type="submit"]').first();
+            if (submitButton.length) {
+                submitButton.trigger("click");
+            } else {
+                $form.trigger("submit");
+            }
+        }
+    }
+}


=====================================
src/js/vue-widgets/element-plus-ui/src/tests/utils/applyInput.test.js
=====================================
@@ -189,4 +189,45 @@ describe("applyInput", () => {
             expect(submitHandler).not.toHaveBeenCalled();
         }
     });
+
+    test.each([
+        ["text"],
+        ["search"],
+        ["tel"],
+        ["url"],
+        ["email"],
+        ["password"],
+        ["date"],
+        ["month"],
+        ["week"],
+        ["time"],
+        ["datetime-local"],
+        ["number"],
+    ])("should not implicitly submit the form when the when a %s type input is found in the form", async (givenType) => {
+        applyInput();
+
+        const input = $("<input>");
+        input.attr("placeholder", "Input");
+        input.attr("type", "text");
+        input.attr("value", "Value");
+
+        const form = $("<form></form>");
+        form.append(input);
+        form.append(`<input type="${givenType}"/>`);
+        $("body").append(form);
+
+        const submitHandler = vi.fn();
+        form.on("submit", submitHandler);
+
+        await window.happyDOM.waitUntilComplete();
+
+        const elInput = $(`el-input#${input.attr("element-plus-ref")}`);
+
+        const event = $.Event("enter");
+        elInput.trigger(event);
+
+        await window.happyDOM.waitUntilComplete();
+
+        expect(submitHandler).not.toHaveBeenCalled();
+    });
 });


=====================================
src/js/vue-widgets/element-plus-ui/src/utils/applyAutocomplete.js
=====================================
@@ -1,3 +1,5 @@
+import enterKeypressHandler from "../helpers/shared/enterKeypressHandler";
+
 export const TEXT = {
     ERROR_NO_ELEMENT: "The element must be provided to apply the autocompletion",
     ERROR_NO_SOURCE: "Either remoteSourceUrl or sourceList must be provided to apply the autocompletion",
@@ -64,27 +66,7 @@ export default function applyAutocomplete(element, remoteSourceUrl = null, sourc
         }
     });
 
-    elementPlusUi.addEventListener("pressEnter", () => {
-        const form = element.closest("form");
-        if (!form) return;
-
-        let defaultSubmitButton = form.querySelector('button[type="submit"]:not([disabled]), input[type="submit"]:not([disabled])');
-
-        if (defaultSubmitButton) {
-            defaultSubmitButton.click();
-            return;
-        } else {
-            // If no button exists, count how many inputs types that can block implicit submission
-            const blockingInputCount = form.querySelectorAll(
-                'input[type="text"], input[type="search"], input[type="url"], input[type="tel"], input[type="email"], input[type="password"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], input[type="number"]'
-            ).length;
-
-            if (blockingInputCount <= 1) {
-                // If there's only one or fewer, we can safely submit the form directly.
-                form.submit();
-            }
-        }
-    });
+    elementPlusUi.addEventListener("pressEnter", () => enterKeypressHandler($(element), $(elementPlusUi)));
 
     element.setAttribute("element-plus-ref", elementUniqueId);
     element.style.display = "none";


=====================================
src/js/vue-widgets/element-plus-ui/src/utils/applyInput.js
=====================================
@@ -1,4 +1,5 @@
 import { handleAffixes, handleFileInput } from "../helpers/input/applyInput";
+import enterKeypressHandler from "../helpers/shared/enterKeypressHandler";
 
 export default function applyInput() {
     transformContainerInputs(document.body);
@@ -57,19 +58,17 @@ function transformContainerInputs(containerElement) {
         elementPlusUi.on("input", (e) => originalInput.val(e.detail?.[0]).trigger("input"));
 
         ["blur", "focus", "keyup", "keydown"].forEach((event) => {
-            elementPlusUi.on(event, () => {
+            elementPlusUi.on(event, (e) => {
                 // CRITICAL: Sync value *before* dispatching the event to prevent race conditions.
-                originalInput.val(elementPlusUi.val()).trigger(event);
+                originalInput.val(elementPlusUi.val()).trigger(
+                    $.Event(event, {
+                        originalEvent: e,
+                    })
+                );
             });
         });
 
-        elementPlusUi.on("enter", () => {
-            const $form = originalInput.closest("form");
-            if ($form.length) {
-                originalInput.val(elementPlusUi.val());
-                $form.trigger("submit");
-            }
-        });
+        elementPlusUi.on("enter", () => enterKeypressHandler(originalInput, elementPlusUi));
 
         const $form = originalInput.closest("form");
         if ($form.length && !$form.data("ep-sync-added")) {



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/90351877e828603c60472cb1127576457d522535

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/90351877e828603c60472cb1127576457d522535
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs