fix: TypeError cannot set properties of undefined (setting 'keydownHandlerIndex') (#9327)

This commit is contained in:
Sivin Varghese
2024-04-30 15:20:05 +05:30
committed by GitHub
parent 6917ea2dbd
commit 4fd8c7a61b

View File

@@ -11,22 +11,26 @@ export default {
if (events) { if (events) {
const wrappedEvents = this.wrapEventsInKeybindingsHandler(events); const wrappedEvents = this.wrapEventsInKeybindingsHandler(events);
const keydownHandler = createKeybindingsHandler(wrappedEvents); const keydownHandler = createKeybindingsHandler(wrappedEvents);
this.appendToHandler(keydownHandler); this.addEventHandler(keydownHandler);
document.addEventListener('keydown', keydownHandler);
} }
}, },
beforeDestroy() { beforeDestroy() {
if (this.$el && this.$el.dataset.keydownHandlerIndex) { if (this.$el && this.$el.dataset?.keydownHandlerIndex) {
const handlerToRemove = const handlerToRemove =
taggedHandlers[this.$el.dataset.keydownHandlerIndex]; taggedHandlers[this.$el.dataset.keydownHandlerIndex];
document.removeEventListener('keydown', handlerToRemove); document.removeEventListener('keydown', handlerToRemove);
} }
}, },
methods: { methods: {
appendToHandler(keydownHandler) { addEventHandler(keydownHandler) {
const indexToAppend = taggedHandlers.push(keydownHandler) - 1; const indexToAppend = taggedHandlers.push(keydownHandler) - 1;
const root = this.$el; 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() { getKeyboardEvents() {
return null; return null;