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

@@ -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();

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',

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