feat: add hide keyboard button on search page

frontend/spa/src/views/Search.vue

@@ -24,6 +24,8 @@
               @search="handleSearch"
               @keydown.enter="handleEnter"
               @input="debouncedSearch"
+              @focus="handleFocus"
+              @blur="handleBlur"
           />
         </label>
         <button
@@ -102,13 +104,25 @@
     </div>
       </div>
     </BaseViewWrapper>
+
+    <button
+        v-if="showHideKeyboardButton"
+        @click="handleHideKeyboardClick"
+        class="btn btn-circle btn-primary fixed bottom-20 right-4 z-50 shadow-lg"
+        type="button"
+        aria-label="Скрыть клавиатуру"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+        <path d="m12 23 -3.675 -3.7H15.7L12 23ZM3.5 17c-0.4 0 -0.75 -0.15 -1.05 -0.45 -0.3 -0.3 -0.45 -0.65 -0.45 -1.05V4.5c0 -0.4 0.15 -0.75 0.45 -1.05C2.75 3.15 3.1 3 3.5 3h17c0.4 0 0.75 0.15 1.05 0.45 0.3 0.3 0.45 0.65 0.45 1.05v11c0 0.4 -0.15 0.75 -0.45 1.05 -0.3 0.3 -0.65 0.45 -1.05 0.45H3.5Zm0 -1.5h17V4.5H3.5v11Zm4.6 -1.625h7.825v-1.5H8.1v1.5ZM4.925 10.75h1.5v-1.5h-1.5v1.5Zm3.175 0h1.5v-1.5h-1.5v1.5Zm3.15 0h1.5v-1.5h-1.5v1.5Zm3.175 0h1.5v-1.5h-1.5v1.5Zm3.15 0h1.5v-1.5h-1.5v1.5Zm-12.65 -3.125h1.5v-1.5h-1.5v1.5Zm3.175 0h1.5v-1.5h-1.5v1.5Zm3.15 0h1.5v-1.5h-1.5v1.5Zm3.175 0h1.5v-1.5h-1.5v1.5Zm3.15 0h1.5v-1.5h-1.5v1.5Z" stroke-width="0.5"></path>
+      </svg>
+    </button>
   </div>
 </template>
 
 <script setup>
 import {useSearchStore} from "@/stores/SearchStore.js";
 import {useDebounceFn} from "@vueuse/core";
-import {computed, onMounted, onUnmounted, ref} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
 import {useRoute} from "vue-router";
 import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
@@ -141,11 +155,29 @@ const handleEnter = (event) => {
 
 const handleSearch = () => {
   hideKeyboard();
+  showHideKeyboardButton.value = false;
 };
 
-const handleScroll = useDebounceFn(() => {
+const showHideKeyboardButton = ref(false);
+
+const handleFocus = () => {
+  showHideKeyboardButton.value = true;
+};
+
+const handleBlur = () => {
+  // Не скрываем сразу, даем время на клик по кнопке
+  setTimeout(() => {
+    showHideKeyboardButton.value = false;
+  }, 200);
+};
+
+const handleHideKeyboardClick = () => {
   hideKeyboard();
-}, 100);
+  showHideKeyboardButton.value = false;
+  if (searchInput.value) {
+    searchInput.value.blur();
+  }
+};
 
 const preloadedProducts = ref([]);
 const productsTotal = ref(0);
@@ -173,11 +205,5 @@ onMounted(async () => {
   const response = await searchStore.fetchProducts('', 1, 3);
   productsTotal.value = response?.meta?.total || 0;
   preloadedProducts.value = response.data;
-
-  window.addEventListener('scroll', handleScroll, { passive: true });
-});
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll);
 });
 </script>