From 03df96136c9b6908087e7642ffb2741d44653580 Mon Sep 17 00:00:00 2001
From: Kevin Gorjan <kevingorjan@gmail.com>
Date: Fri, 25 Feb 2022 10:31:01 +0100
Subject: [PATCH 1/3] fix(theme): refactored when clicking outside the
 search-results

---
 .../components/Header/SearchBar/SearchBar.vue | 23 +++++++++++++++----
 .../click-outside/click-outside-directive.js  | 19 +++++++++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 packages/theme/utilities/directives/click-outside/click-outside-directive.js

diff --git a/packages/theme/components/Header/SearchBar/SearchBar.vue b/packages/theme/components/Header/SearchBar/SearchBar.vue
index fd590adc3..4c6dd1eeb 100644
--- a/packages/theme/components/Header/SearchBar/SearchBar.vue
+++ b/packages/theme/components/Header/SearchBar/SearchBar.vue
@@ -51,7 +51,7 @@
 <script>
 import { SfButton, SfSearchBar } from '@storefront-ui/vue';
 import { defineComponent, ref } from '@nuxtjs/composition-api';
-import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
+import { clickOutside } from '~/utilities/directives/click-outside/click-outside-directive.js';
 import SvgImage from '~/components/General/SvgImage.vue';
 
 import debounce from 'lodash.debounce';
@@ -60,6 +60,7 @@ import {
   useCategorySearch,
   useFacet,
 } from '@vue-storefront/magento';
+import { watch, useRoute } from '@nuxtjs/composition-api';
 
 export default defineComponent({
   name: 'SearchBar',
@@ -84,6 +85,8 @@ export default defineComponent({
     const isSearchOpen = ref(false);
     const result = ref(null);
 
+    const route = useRoute()
+
     const {
       result: searchResult,
       search: productsSearch,
@@ -123,9 +126,17 @@ export default defineComponent({
       }
     };
 
-    const closeSearch = () => {
-      hideSearch();
-      term.value = '';
+    const closeSearch = (event) => {
+      if (document) {
+        const searchResultsEl = document.getElementsByClassName('search');
+        if (!searchResultsEl[0].contains(event.target)) {
+          hideSearch();
+          term.value = '';
+        }
+      } else {
+        hideSearch();
+        term.value = '';
+      }
     };
 
     const handleSearch = debounce(async (paramValue) => {
@@ -149,6 +160,10 @@ export default defineComponent({
       emit('SearchBar:result', result.value);
     }, 1000);
 
+    watch(route, (event) => {
+      closeSearch(event);
+    });
+
     return {
       closeSearch,
       showSearch,
diff --git a/packages/theme/utilities/directives/click-outside/click-outside-directive.js b/packages/theme/utilities/directives/click-outside/click-outside-directive.js
new file mode 100644
index 000000000..e8b839446
--- /dev/null
+++ b/packages/theme/utilities/directives/click-outside/click-outside-directive.js
@@ -0,0 +1,19 @@
+export const clickOutside = {
+  bind(el, binding) {
+    binding.name = "click-outside";
+    const closeHandler = binding.value;
+    el._outsideClickHandler = function (event) {
+      if (!el.contains(event.target)) {
+        event.stopPropagation();
+        closeHandler(event, el);
+      }
+    };
+    document.addEventListener("mousedown", el._outsideClickHandler);
+    document.addEventListener("touchstart", el._outsideClickHandler);
+  },
+  unbind(el) {
+    document.removeEventListener("mousedown", el._outsideClickHandler);
+    document.removeEventListener("touchstart", el._outsideClickHandler);
+    el._outsideClickHandler = null;
+  },
+};

From 0c8f9651d14750ae5293eceb04deba20ef7573cf Mon Sep 17 00:00:00 2001
From: Kevin Gorjan <kevingorjan@gmail.com>
Date: Fri, 25 Feb 2022 10:53:49 +0100
Subject: [PATCH 2/3] fix(theme): better aligned search input icon

---
 packages/theme/components/Header/SearchBar/SearchBar.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/theme/components/Header/SearchBar/SearchBar.vue b/packages/theme/components/Header/SearchBar/SearchBar.vue
index 4c6dd1eeb..dad69cfd7 100644
--- a/packages/theme/components/Header/SearchBar/SearchBar.vue
+++ b/packages/theme/components/Header/SearchBar/SearchBar.vue
@@ -177,3 +177,11 @@ export default defineComponent({
 });
 
 </script>
+
+<style lang="scss" scoped>
+.sf-search-bar__button {
+  position: relative;
+  right: 20px;
+  bottom: 0;
+}
+</style>

From fa0f57338f7701e6958d076a69899371b9715ef1 Mon Sep 17 00:00:00 2001
From: Kevin Gorjan <kevingorjan@gmail.com>
Date: Fri, 25 Feb 2022 11:10:31 +0100
Subject: [PATCH 3/3] fix(theme): refactored watcher

---
 packages/theme/components/Header/SearchBar/SearchBar.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/theme/components/Header/SearchBar/SearchBar.vue b/packages/theme/components/Header/SearchBar/SearchBar.vue
index dad69cfd7..5cc7ea915 100644
--- a/packages/theme/components/Header/SearchBar/SearchBar.vue
+++ b/packages/theme/components/Header/SearchBar/SearchBar.vue
@@ -160,8 +160,9 @@ export default defineComponent({
       emit('SearchBar:result', result.value);
     }, 1000);
 
-    watch(route, (event) => {
-      closeSearch(event);
+    watch(route, () => {
+      hideSearch();
+      term.value = '';
     });
 
     return {