[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UX] Autocomplete: Refocus input when no autocomplete results are found

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


Commits:
ac6aca22 by MAGENE Sem Joel at 2025-09-17T19:02:39+00:00
[FIX][UX] Autocomplete: Refocus input when no autocomplete results are found
---
* [FIX][UX] Autocomplete: Refocus input when no autocomplete results are found

See merge request tikiwiki/tiki!8521

- - - - -


1 changed file:

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


Changes:

=====================================
src/js/vue-widgets/element-plus-ui/src/components/Autocomplete/Autocomplete.vue
=====================================
@@ -7,10 +7,30 @@ const props = defineProps(['value', 'remoteSourceUrl', 'sourceList', 'emitCustom
 
 const valueKey = props.valueKey || 'value';
 const placeholder = props.placeholder || TEXT.INPUT_PLACEHOLDER;
+const shouldRefocusOnBlur = ref(false);
 
 const modelValue = ref(props.value);
+const autocompleteRef = ref(null);
 
-const handleFetchSuggestions = (query, callback) => fetchSuggestions(query, callback, props.remoteSourceUrl, (props.sourceList ? JSON.parse(props.sourceList): []));
+const handleFetchSuggestions = (query, callback) => {
+    const wrappedCallback = (results) => {
+        callback(results);
+
+        if (!results || results.length === 0) {
+             // If there are no results, set a flag indicating that the next blur event is likely programmatic and should be counteracted by a refocus.
+            shouldRefocusOnBlur.value = true;
+        }
+    };
+    fetchSuggestions(query, wrappedCallback, props.remoteSourceUrl, (props.sourceList ? JSON.parse(props.sourceList): []));
+}
+
+const handleBlur = () => {
+    // Refocuses the input if the blur was triggered programmatically by a "no results" event.
+    if (shouldRefocusOnBlur.value) {
+        autocompleteRef.value?.inputRef?.focus();
+        shouldRefocusOnBlur.value = false;
+    }
+};
 
 const handleSelect = (value) => {
     props.emitCustomEvent('select', value);
@@ -46,6 +66,7 @@ export const DATA_TEST_ID = {
 <template>
     <ConfigWrapper :language="language">
         <el-autocomplete
+            ref="autocompleteRef"
             v-model="modelValue"
             :debounce="500"
             :trigger-on-focus="false"
@@ -57,6 +78,7 @@ export const DATA_TEST_ID = {
             @select="handleSelect"
             @input="handleInput"
             @keyup.enter="handlePressEnter"
+            @blur="handleBlur"
             clearable
             :teleported="false"
         >



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

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