From 4fd8c7a61b338de27775a5c4e73f9c34829e2c48 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 30 Apr 2024 15:20:05 +0530
Subject: [PATCH] fix: TypeError cannot set properties of undefined (setting
 'keydownHandlerIndex') (#9327)

---
 .../shared/mixins/keyboardEventListenerMixins.js   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/javascript/shared/mixins/keyboardEventListenerMixins.js b/app/javascript/shared/mixins/keyboardEventListenerMixins.js
index da49b80b8..9f6d43333 100644
--- a/app/javascript/shared/mixins/keyboardEventListenerMixins.js
+++ b/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;