diff --git a/app/javascript/packs/portal.js b/app/javascript/packs/portal.js
index 874d3488d..874fd6182 100644
--- a/app/javascript/packs/portal.js
+++ b/app/javascript/packs/portal.js
@@ -5,8 +5,10 @@ import Vue from 'vue';
 import { InitializationHelpers } from '../portal/portalHelpers';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
+import { directive as onClickaway } from 'vue-clickaway';
 
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
+Vue.directive('on-clickaway', onClickaway);
 
 Rails.start();
 Turbolinks.start();
diff --git a/app/javascript/packs/widget.js b/app/javascript/packs/widget.js
index e866ecbe4..1ba477639 100644
--- a/app/javascript/packs/widget.js
+++ b/app/javascript/packs/widget.js
@@ -12,12 +12,15 @@ import {
   isPhoneNumberValidWithDialCode,
 } from 'shared/helpers/Validators';
 import router from '../widget/router';
+import { directive as onClickaway } from 'vue-clickaway';
+
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 const PhoneInput = () => import('../widget/components/Form/PhoneInput');
 
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
+Vue.directive('on-clickaway', onClickaway);
 
 const i18nConfig = new VueI18n({
   locale: 'en',
diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index f0b8af986..3e9690b20 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -4,6 +4,7 @@ import Vue from 'vue';
 import PublicArticleSearch from './components/PublicArticleSearch.vue';
 import TableOfContents from './components/TableOfContents.vue';
 import { initializeTheme } from './portalThemeHelper.js';
+import { directive as onClickaway } from 'vue-clickaway';
 
 export const getHeadingsfromTheArticle = () => {
   const rows = [];
@@ -80,6 +81,9 @@ export const InitializationHelpers = {
     if (isSearchContainerAvailable) {
       new Vue({
         components: { PublicArticleSearch },
+        directives: {
+          'on-clickaway': onClickaway,
+        },
         template: '<PublicArticleSearch />',
       }).$mount('#search-wrap');
     }