Skip to content

Handle a ref being undefined during computed prop computation. #3252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bjester merged 1 commit into from
Aug 5, 2021
Merged

Handle a ref being undefined during computed prop computation. #3252

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions contentcuration/contentcuration/frontend/shared/views/ResizableNavigationDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
return this.temporary ? this.maxWidth : this.width;
},
drawerElement() {
return this.$refs.drawer.$el;
return this.$refs.drawer && this.$refs.drawer.$el;
},
isRight() {
return this.$isRTL ? !this.right : this.right;
Expand All @@ -96,9 +96,11 @@
this.throttledUpdateWidth = animationThrottle((...args) => updateWidth(...args));

this.$nextTick(() => {
const drawerBorder = this.drawerElement.querySelector('.v-navigation-drawer__border');
drawerBorder.addEventListener('mousedown', this.handleMouseDown, false);
document.addEventListener('mouseup', this.handleMouseUp, false);
if (this.drawerElement) {
Copy link
Copy Markdown
Member

@bjester bjester Aug 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this whole this.$nextTick block should just turn into a watcher on the drawerElement?

Copy link
Copy Markdown
Member Author

@rtibbles rtibbles Aug 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that would work, feels like it should really be in the mounted method of the component it is changing (but we can't because it's vuetify).

const drawerBorder = this.drawerElement.querySelector('.v-navigation-drawer__border');
drawerBorder.addEventListener('mousedown', this.handleMouseDown, false);
document.addEventListener('mouseup', this.handleMouseUp, false);
}
});
},
methods: {
Expand Down Expand Up @@ -135,7 +137,9 @@
});

if (event.offsetX < 12) {
this.drawerElement.style.transition = 'initial';
if (this.drawerElement) {
this.drawerElement.style.transition = 'initial';
}
document.addEventListener('mousemove', this.resize, false);
}
},
Expand All @@ -147,8 +151,9 @@
this.dragging = false;
this.throttledUpdateWidth.cancel();
this.updateWidth(event.clientX);

this.drawerElement.style.transition = '';
if (this.drawerElement) {
this.drawerElement.style.transition = '';
}

document.body.style.cursor = '';
document.body.style.pointerEvents = 'unset';
Expand Down