From a4001374a5928514353e41715c5368705b1c066d Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 10 May 2024 11:15:36 +0530
Subject: [PATCH] feat: add missing clickaway directives (#9451)

* feat: add onClickaway to widget

* feat: add clickaway to portal

* feat: add directive to PublicArticleSearch
---
 app/javascript/packs/portal.js         | 2 ++
 app/javascript/packs/widget.js         | 3 +++
 app/javascript/portal/portalHelpers.js | 4 ++++
 3 files changed, 9 insertions(+)

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');
     }