[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UI] Autocomplete (element-plus): Enable form submission on Enter and...

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


Commits:
5f8acc6e by MAGENE Sem Joel at 2025-09-05T18:09:19+00:00
[FIX][UI] Autocomplete (element-plus): Enable form submission on Enter and...
---
* [FIX][UI] Autocomplete (element-plus): Enable form submission on Enter and highlight first suggestion by default

See merge request tikiwiki/tiki!8078

- - - - -


2 changed files:

- src/js/vue-widgets/element-plus-ui/src/components/Autocomplete/Autocomplete.vue
- src/js/vue-widgets/element-plus-ui/src/utils/applyAutocomplete.js


Changes:

=====================================
src/js/vue-widgets/element-plus-ui/src/components/Autocomplete/Autocomplete.vue
=====================================
@@ -53,6 +53,7 @@ export const DATA_TEST_ID = {
             :data-testid="DATA_TEST_ID.AUTOCOMPLETE_ELEMENT"
             :placeholder="placeholder"
             :value-key="valueKey"
+            :highlight-first-item="true"
             @select="handleSelect"
             @input="handleInput"
             @keyup.enter="handlePressEnter"


=====================================
src/js/vue-widgets/element-plus-ui/src/utils/applyAutocomplete.js
=====================================
@@ -59,6 +59,28 @@ 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();
+            }
+        }
+    });
+
     element.setAttribute("element-plus-ref", elementUniqueId);
     element.style.display = "none";
     element.parentNode.insertBefore(elementPlusUi, element.nextSibling);



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/5f8acc6ea802b82fb58fe155f60d39aeebf22e19

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/5f8acc6ea802b82fb58fe155f60d39aeebf22e19
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