Modals still open and can't be closed if we navigate away while they're open and then back

[andrewtavis]

Terms

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

Behavior

Something that came up during the recent testing of the command palette was the realization that when we navigate away while they're open, then if we come back they can't be closed (thus breaking the entire UI). Steps to reproduce this are:

• Go to a page where a modal works, say /home
• Click on the activist logo to go to the landing page
• With the back button of the browser, navigate back to /home
• Open the command palette with command or control k
• Navigate back to the landing page by using the forward button (do not close the command palette)
• Navigate back to the /home page using the back button

After the above steps, the command palette will still be open, and further all functionality to close it will also not function. The X to close won't work, and clicking outside the modal will also not close it.

Would be great if we look into this!

[andrewtavis]

Hey @mattburnett-repo 👋 Would this be something you'd be interested in looking into?

[andrewtavis]

Let me know if more explanation on how to reproduce would be helpful! :)

[mattburnett-repo]

@andrewtavis I'll get on this. Go ahead and assign it to me.

Is the behavior in this issue unique to command palette, or does it happen with other modals?

[andrewtavis]

Hey @mattburnett-repo 👋 Thanks for jumping in to help here! My assumption would be that this is for all modals given they're all using the same store, but I didn't test others :)

[mattburnett-repo]

The behavior described in the original issue is resolved. However, changes were made that will likely affect all other modals. This needs to be investigated and resolved.

We were using a prop called isOpen to control / toggle the display of the modal. Recently we started using a Pinia store called modals to control the modal display.

The behavior described in this issue arose from the fact that we were not changing the value of the isOpen prop when navigating away from the path underlying the displayed modal. That is now changed.

The very short version is

• Took out all of the :isOpen props.
• Moved modal display flow away from :isOpen props, towards using the modals Pinia store.
• Made changes to ModalBase to watch the Route / Router object thing, and to close the modal if the use changes the route / path / url / etc. while the modal is still open.

Again, the behavior described in this issue is resolved, but there are very likely follow-on effects, affecting all of the other modals. The other modals should be revised and tested.

Not sure if we want to create a PR off of this issue, then open another issue for the other modals and create another PR of of the 'other modals' PR.

[andrewtavis]

Thanks for all of this, @mattburnett-repo! Happy to sit on a call soonish and finalize this :)

[mattburnett-repo]

After a conversation with @andrewtavis, we're going to fix all of the templates as part of this issue and bundle them into one big PR at the end.

Here's a list of affected modal templates / files, as well as how to get to them.

• ModalEdit: Click the pencil icon on the About card on organization About pages
  • CardAboutOrganization.vue
    • ModalQRCodeBtn
      • ModalQRCode
    • ModalEditAboutOrganization.vue
• ModalImage: On pages like "Get involved" and "Get active" that you get to from the landing page - click the image to see the modal
• ModalQRCode: Click the QR code icon on the About card on organization About pages
• ModalUploadImages: Click the + icon on the image carousel on organization About pages or the + icon on the organization icon on the left sidebar menu
• ModalCommandPalette: You know this one :D
• ModalMediaImageCarousel: Click the expand icon on the image carousel on organization About pages
• ModalOrganizationStatus: Not actice at this point, but would be accessed by the green checkmark that used to be next to the organization name on the About page
• ModalSharePage: Click the share CTA button at the top right of the organization About page

[mattburnett-repo]

It looks like this issue is blocked by #938

For now this issue only needs a test / dummy record for an org and anything the org has as dependencies (eg org text, etc)

[mattburnett-repo]

Discovered the 'admin' app in Django and was able to manually enter test records for Organization and OrganizationText.

Using 'manage.py dumpdata' it would be very easy to extract fixtures from such test data, add them to files in the 'fixtures' folder, and include those files in docker-compose.yml in the backend/command section.

[mattburnett-repo]

Using the Nuxt admin panel / thing, I went down the component tree as best as possible and removed the 'isOpen' props where they were found.

Not sure if that fixed everything, but quite a few are done.

[andrewtavis]

Closed by #941 :) Thanks for the patience in me bringing this in, @mattburnett-repo! Let's be in touch on next steps for modals 😊