diff --git a/packages/theme/components/Header/SearchBar/SearchBar.vue b/packages/theme/components/Header/SearchBar/SearchBar.vue
index fd590adc3..5cc7ea915 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,11 @@ export default defineComponent({
       emit('SearchBar:result', result.value);
     }, 1000);
 
+    watch(route, () => {
+      hideSearch();
+      term.value = '';
+    });
+
     return {
       closeSearch,
       showSearch,
@@ -162,3 +178,11 @@ export default defineComponent({
 });
 
 </script>
+
+<style lang="scss" scoped>
+.sf-search-bar__button {
+  position: relative;
+  right: 20px;
+  bottom: 0;
+}
+</style>
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;
+  },
+};