Merge branch 'develop' into feat/CW-3082

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,

app/javascript/shared/mixins/keyboardEventListenerMixins.js

@@ -11,22 +11,26 @@ export default {
     if (events) {
       const wrappedEvents = this.wrapEventsInKeybindingsHandler(events);
       const keydownHandler = createKeybindingsHandler(wrappedEvents);
-      this.appendToHandler(keydownHandler);
-      document.addEventListener('keydown', keydownHandler);
+      this.addEventHandler(keydownHandler);
     }
   },
   beforeDestroy() {
-    if (this.$el && this.$el.dataset.keydownHandlerIndex) {
+    if (this.$el && this.$el.dataset?.keydownHandlerIndex) {
       const handlerToRemove =
         taggedHandlers[this.$el.dataset.keydownHandlerIndex];
       document.removeEventListener('keydown', handlerToRemove);
     }
   },
   methods: {
-    appendToHandler(keydownHandler) {
+    addEventHandler(keydownHandler) {
       const indexToAppend = taggedHandlers.push(keydownHandler) - 1;
       const root = this.$el;
-      root.dataset.keydownHandlerIndex = indexToAppend;
+      if (root && root.dataset) {
+        // For the components with a top level v-if Vue renders it as an empty comment in the DOM
+        // so we need to check if the root element has a dataset property to ensure it is a valid element
+        document.addEventListener('keydown', keydownHandler);
+        root.dataset.keydownHandlerIndex = indexToAppend;
+      }
     },
     getKeyboardEvents() {
       return null;