From 028f48ed491cdc45d1f89fef95fc9f983c5eb9a1 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 16 Dec 2023 14:09:04 +0100
Subject: [PATCH] [Autocomplete UI] Better handling of `blur` events.

---
 .../webapp/src/components/elements/Autocomplete.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue b/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
index 5d49a8b444..71f8605283 100644
--- a/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
@@ -10,7 +10,7 @@
         :value="value"
         @focus="onFocus"
         @input="onInput"
-        @blur="onInput"
+        @blur="onBlur"
         @keydown="onInputKeyDown"
         @keyup="onInputKeyUp"
        >
@@ -23,8 +23,7 @@
         :key="item"
         :data-item="item"
         v-for="(item, i) in visibleItems"
-        @click="onItemSelect(item)"
-      >
+        @click="onItemSelect(item)">
         <span class="matching" v-if="value?.length">{{ item.substr(0, value.length) }}</span>
         <span class="normal">{{ item.substr(value?.length || 0) }}</span>
       </div>
@@ -150,6 +149,14 @@ export default {
       this.visible = true
     },
 
+    onBlur(e) {
+      this.onInput(e)
+      this.$nextTick(() => {
+        if (this.valueIsInItems())
+          this.visible = false
+      })
+    },
+
     onItemSelect(item) {
       this.$emit("input", item)
       this.$nextTick(() => {