fix: TypeError cannot set properties of undefined (setting 'keydownHa…

…ndlerIndex') (#9327)

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;