TypeError: Cannot read properties of undefined (reading 'isOpen') in MediaImageCarousel.vue

[mattburnett-repo]

Terms

• [X] I have searched all open bug reports
• [X] I agree to follow activist's Code of Conduct

Behavior

A quick summary:

• The error in the title appears in the dev tools console when navigating away from a page. This is the primary issue.
• It is possible that this is due to unnecessary 'handleCloseModal' methods in some of the codebase. This is a secondary issue, and is perhaps better handled in a separate bug report / issue.

Steps to reproduce:

• Start at homepage.
• Click 'View Organizations'.
• Click any of the displayed organizations.
• Once the clicked organization is displayed, navigate away from the org by clicking 'Back'.
• Error appears in dev tools console.

Notes (why this might be happening, things tried that didn't work, etc):

• There is a watch() method at the end of ModalBase.vue (line 100) that calls the closeModal() method if the user has navigated away from a page.
  • This happens whether any modals are open or not. I think this is the cause of the primary issue, and is simple to fix.
• closeModal() emits a "closeModal" event. Sometimes this is needed so that an affected modal can do cleanup to itself (eg. CommandPalette).
• It looks like there are components in the codebase that could be receiving this "closeModal" event. Additionally, there is duplicate code to handle "closeModal" events in these components. It's possible that these components are trying to close a modal window that is not open. This would cause the error.
  • Relevant example is in MediaImageCarousel.vue, line 33 and line 64.

So there are two issues: 1 The closeModal() method is triggered every time a user navigates around the app, whether there is an open modal or not. 2 There is duplicate code in some components that handles modal closing outside of ModalBase.vue. ModalBase should be the only place where modals are closed.

I suggest that the primary issue (issue 1) be resolved first and then be sent through the PR process. Once the PR is closed, the secondary issue (issue 2) should be addressed.

I'm happy to take this on. Let me know if this approach is appropriate, or if another approach is preferred.

[andrewtavis]

Thanks for mapping this out, @mattburnett-repo! @momanyisamuel and I were seeing much of this earlier today. By all means feel free to take this on :)

[andrewtavis]

Let's definitely handle issue 1 first and move to the second as you sugguested!

[mattburnett-repo]

Created local branch 980.2, in order to address the secondary issue in this bug report (possible duplicate modal-handling code in some of the codebase). Once this secondary issue is addressed, another PR for this bug report will arrive.

[andrewtavis]

Thanks @mattburnett-repo!