feat: Remove the usage of clickAway mixin with directive (#9323)

2025-11-01 19:48:08 +00:00 · 2024-04-30 10:35:14 +05:30
parent 705f8ef948
commit 12af2fe026
36 changed files with 20 additions and 86 deletions
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -88,7 +88,6 @@
 <script>
 import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -109,7 +108,7 @@ export default {
    WootDropdownMenu,
    CustomSnoozeModal,
  },
-  mixins: [clickaway, alertMixin, keyboardEventListenerMixins],
+  mixins: [alertMixin, keyboardEventListenerMixins],
  props: { conversationId: { type: [String, Number], required: true } },
  data() {
    return {
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -47,7 +47,6 @@

 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -67,7 +66,7 @@ export default {
    AvailabilityStatusBadge,
  },

-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],

  data() {
    return {
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -106,7 +106,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
@@ -119,7 +118,6 @@ export default {
    WootDropdownItem,
    AvailabilityStatus,
  },
-  mixins: [clickaway],
  props: {
    show: {
      type: Boolean,
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -18,13 +18,11 @@

 <script>
 import { Chrome } from 'vue-color';
-import { mixin as clickaway } from 'vue-clickaway';

 export default {
  components: {
    Chrome,
  },
-  mixins: [clickaway],
  props: {
    value: {
      type: String,
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -33,7 +33,6 @@
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';

 export default {
@@ -42,7 +41,7 @@ export default {
    LabelDropdown,
  },

-  mixins: [clickaway, adminMixin, keyboardEventListenerMixins],
+  mixins: [adminMixin, keyboardEventListenerMixins],

  props: {
    allLabels: {
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -45,7 +45,6 @@
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import FilterItem from './FilterItem.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';

@@ -53,7 +52,7 @@ export default {
  components: {
    FilterItem,
  },
-  mixins: [clickaway, uiSettingsMixin],
+  mixins: [uiSettingsMixin],
  data() {
    return {
      showActionsDropdown: false,
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -37,7 +37,6 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
@@ -52,7 +51,7 @@ export default {
    EmailTranscriptModal,
    ResolveAction,
  },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
  data() {
    return {
      showEmailActionsModal: false,
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -153,7 +153,6 @@

 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';

@@ -218,7 +217,6 @@ export default {
    ArticleSearchPopover,
  },
  mixins: [
-    clickaway,
    inboxMixin,
    uiSettingsMixin,
    alertMixin,
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -180,7 +180,6 @@
  </woot-modal>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import timeMixin from 'dashboard/mixins/time';
@@ -200,7 +199,7 @@ export default {
  components: {
    Thumbnail,
  },
-  mixins: [keyboardEventListenerMixins, clickaway, timeMixin],
+  mixins: [keyboardEventListenerMixins, timeMixin],
  props: {
    show: {
      type: Boolean,
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -51,7 +51,6 @@
 <script>
 import { evaluateSLAStatus } from '../helpers/SLAHelper';
 import SLAPopoverCard from './SLAPopoverCard.vue';
-import { mixin as clickaway } from 'vue-clickaway';

 const REFRESH_INTERVAL = 60000;

@@ -59,7 +58,6 @@ export default {
  components: {
    SLAPopoverCard,
  },
-  mixins: [clickaway],
  props: {
    chat: {
      type: Object,
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -101,14 +101,12 @@
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import { mixin as clickaway } from 'vue-clickaway';

 export default {
  components: {
    Thumbnail,
    Spinner,
  },
-  mixins: [clickaway],
  props: {
    selectedInboxes: {
      type: Array,
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -74,11 +74,9 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';

 export default {
-  mixins: [clickaway],
  data() {
    return {
      query: '',
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -59,10 +59,8 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 export default {
-  mixins: [clickaway],
  data() {
    return {
      query: '',
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -36,7 +36,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';

@@ -45,7 +44,6 @@ export default {
    WootDropdownItem,
    WootDropdownMenu,
  },
-  mixins: [clickaway],
  props: {
    selectedInboxes: {
      type: Array,
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -87,7 +87,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';

@@ -95,7 +94,6 @@ export default {
  components: {
    Hotkey,
  },
-  mixins: [clickaway],
  props: {
    show: {
      type: Boolean,
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -106,7 +106,6 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -124,7 +123,7 @@ export default {
    TranslateModal,
    MenuItem,
  },
-  mixins: [alertMixin, clickaway, messageFormatterMixin],
+  mixins: [alertMixin, messageFormatterMixin],
  props: {
    message: {
      type: Object,
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -73,7 +73,6 @@ import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';

-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 export default {
@@ -84,7 +83,6 @@ export default {
    SearchResultConversationsList,
    SearchResultMessagesList,
  },
-  mixins: [clickaway],
  data() {
    return {
      selectedTab: 'all',
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -28,7 +28,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';

@@ -45,7 +44,7 @@ export default {
    Spinner,
    VeTable,
  },
-  mixins: [clickaway, timeMixin, rtlMixin],
+  mixins: [timeMixin, rtlMixin],
  props: {
    contacts: {
      type: Array,
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -78,7 +78,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
@@ -92,7 +91,7 @@ export default {
    ThumbnailGroup,
    MultiselectDropdownItems,
  },
-  mixins: [alertMixin, agentMixin, clickaway],
+  mixins: [alertMixin, agentMixin],
  props: {
    conversationId: {
      type: [Number, String],
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -34,7 +34,6 @@

 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import MacroPreview from './MacroPreview.vue';
 import { CONVERSATION_EVENTS } from '../../../../helper/AnalyticsHelper/events';

@@ -42,7 +41,7 @@ export default {
  components: {
    MacroPreview,
  },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
  props: {
    macro: {
      type: Object,
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -166,7 +166,6 @@
  </div>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import timeMixin from 'dashboard/mixins/time';
 import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -195,7 +194,7 @@ export default {
    NewConversation,
    ContactMergeModal,
  },
-  mixins: [alertMixin, adminMixin, clickaway, timeMixin],
+  mixins: [alertMixin, adminMixin, timeMixin],
  props: {
    contact: {
      type: Object,
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -48,7 +48,6 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
@@ -60,12 +59,7 @@ export default {
    AddLabel,
  },

-  mixins: [
-    clickaway,
-    conversationLabelMixin,
-    adminMixin,
-    keyboardEventListenerMixins,
-  ],
+  mixins: [conversationLabelMixin, adminMixin, keyboardEventListenerMixins],
  props: {
    conversationId: {
      type: Number,
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -33,7 +33,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -50,7 +49,7 @@ export default {
      },
    },
  },
-  mixins: [timeMixin, messageFormatterMixin, clickaway],
+  mixins: [timeMixin, messageFormatterMixin],
  props: {
    isOnExpandedLayout: {
      type: Boolean,
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -34,7 +34,6 @@

 <script>
 import { debounce } from '@chatwoot/utils';
-import { mixin as clickaway } from 'vue-clickaway';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';

 import SearchHeader from './Header.vue';
@@ -52,7 +51,7 @@ export default {
    SearchResults,
    ArticleView,
  },
-  mixins: [clickaway, portalMixin, alertMixin, keyboardEventListenerMixins],
+  mixins: [portalMixin, alertMixin, keyboardEventListenerMixins],
  props: {
    selectedPortalSlug: {
      type: String,
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -138,8 +138,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
@@ -152,7 +150,6 @@ export default {
    WootDropdownMenu,
    MultiselectDropdownItems,
  },
-  mixins: [clickaway],
  props: {
    headerTitle: {
      type: String,
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -109,14 +109,13 @@

 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import wootConstants from 'dashboard/constants/globals';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';

 const { ARTICLE_STATUS_TYPES } = wootConstants;

 export default {
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
  props: {
    isSidebarOpen: {
      type: Boolean,
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -47,13 +47,11 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import PortalSwitch from './PortalSwitch.vue';
 export default {
  components: {
    PortalSwitch,
  },
-  mixins: [clickaway],
  props: {
    portals: {
      type: Array,
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -36,13 +36,10 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');

 export default {
  components: { EmojiInput },
-  mixins: [clickaway],
  props: {
    label: {
      type: String,
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -57,7 +57,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import InboxOptionMenu from './InboxOptionMenu.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import InboxDisplayMenu from './InboxDisplayMenu.vue';
@@ -68,7 +67,7 @@ export default {
    InboxOptionMenu,
    InboxDisplayMenu,
  },
-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],
  props: {
    isContextMenuOpen: {
      type: Boolean,
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -115,7 +115,6 @@

 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import NotificationPanelList from './NotificationPanelList.vue';

@@ -125,7 +124,7 @@ export default {
  components: {
    NotificationPanelList,
  },
-  mixins: [clickaway, rtlMixin],
+  mixins: [rtlMixin],
  data() {
    return {
      pageSize: 15,
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -21,7 +21,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
@@ -34,7 +33,7 @@ export default {
    CampaignCard,
  },

-  mixins: [clickaway, campaignMixin],
+  mixins: [campaignMixin],

  props: {
    campaigns: {
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -22,14 +22,11 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
 export default {
  components: {
    SLAPopoverCard,
  },
-  mixins: [clickaway],
-
  props: {
    slaEvents: {
      type: Array,
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -23,8 +23,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import SearchSuggestions from './SearchSuggestions.vue';
 import PublicSearchInput from './PublicSearchInput.vue';

@@ -35,7 +33,6 @@ export default {
    PublicSearchInput,
    SearchSuggestions,
  },
-  mixins: [clickaway],
  props: {
    value: {
      type: [String, Number],
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -74,13 +74,11 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 export default {
  components: {
    Thumbnail,
    MultiselectDropdownItems,
  },
-  mixins: [clickaway],
  props: {
    options: {
      type: Array,
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -49,7 +49,6 @@

 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';

 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
@@ -69,7 +68,7 @@ export default {
    FluentIcon,
    ResizableTextArea,
  },
-  mixins: [clickaway, configMixin, darkModeMixin],
+  mixins: [configMixin, darkModeMixin],
  props: {
    onSendMessage: {
      type: Function,
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -83,7 +83,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
@@ -94,12 +93,7 @@ export default {
  components: {
    FluentIcon,
  },
-  mixins: [
-    mentionSelectionKeyboardMixin,
-    FormulateInputMixin,
-    darkModeMixin,
-    clickaway,
-  ],
+  mixins: [mentionSelectionKeyboardMixin, FormulateInputMixin, darkModeMixin],
  props: {
    placeholder: {
      type: String,