[Enhancement] close VDialog when pressing the back button

[xmorell]

Steps to reproduce

Open a dialog using a mobile.

Versions

All the versions, never been implemented

What is expected ?

I would expect that when the users click the back button from the mobile the opened dialog closes, instead of reloading the previous page.

What is actually happening ?

Actually if the users click the back button, the previous page is reload

Reproduction Link

https://vuetifyjs.com/components/dialogs

[FabianSilva]

I also noted this too... I'm thinking on make a route and go to that route that makes dialog open and come back to route with dialog closed....but reading https://router.vuejs.org/en/advanced/navigation-guards.html not sure if beforeRouteLeave can be used to check if dialog is open and close it and cancel going back...

update:
effectively, with the beforeRouteLeave event on the component I can avoid to go back if popup is open

something like this:

export default {
     ...
    beforeRouteLeave (to, from, next) {
      // called when the route that renders this component is about to be navigated away from.
      // has access to `this` component instance.
      if (this.popupVisible && !this.$store.state.drawer) {
        this.popupVisible = false
        next(false)
      } else {
        next()
      }

    },....

note: tested on browser... but I suppose that same will work for mobile too

[ksankumar]

This issue should applicable for v-select, v-date and time picker modal, navigation bar, menus, bottom sheets in mobile

[ghost]

If this is added, then I'd like to suggest that at least for v-dialog this behavior is not restricted to mobile only. Not sure if it happens to others, but to me it happens on desktop too often as well that I'm presented with a full screen dialog that could have very well been an entirely new page and when I press the Back button, I'm not where I expected.

[johnleider]

This is still something we plan to implement but did not make the cut for v2.0 release.

If you have any additional questions, please reach out to us in our Discord community.

[tamirvs]

I've created a mixin to solve this until a proper solution is given:
https://gist.github.com/tamirvs/d1a584f3fc9c494cf75d3ca76c54fb1b

[tamirvs]

@mariusvigariu It could work, but if I have a navigation drawer that can be opened in every route I will have to create a special sub route in every route right?

[ghost]

Yes, you are right. While for dialogs I would've nothing against creating an extra nuxt page, the drawers would be annoying to be handled like this.

[franciscouemura]

Hi, @tamirvs. The mixin solution is realy great. But it doesn't work when you have no history. I mean, if you have just landed on the page and then open the dialog and press back, it will leave the page. Have you noticed this? if yes, how do you treat this behavior?

[barryong]

Hi all, I just created a mixin to solve this problem as well. It uses Vuex to store the dialogs state and JS history.state for the back button to work. Vue Router is not require and it works in both dialog and sheet.

Here is the repo.
https://github.com/barryong/vue-dialog-mixin

It's actually just a single Vue component mixin file but I had created a package in npm for easy usage.

Feel free to comment and reach to me if you find any bugs.

[1isten]

This feature can be implemented using url hash:

<template>
  <div>
    <v-btn @click.stop="toggleDialog(true)">Open Dialog</v-btn>

    <v-dialog v-model="dialog">
      <!-- my dialog... -->
    </v-dialog>
  </div>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
  }),
  watch: {
    '$route.hash'(newHash, oldHash) {
      if (newHash === '#my-dialog') {
        this.dialog = true;
      } else if (oldHash === '#my-dialog') {
        this.dialog = false;
      }
    },
  },
  methods: {
    toggleDialog(open) {
      if (open) {
        this.$router.push('#my-dialog');
      } else {
        this.$router.back(); // 😎 back button click
      }
    },
  },
};
</script>

CodePen demo

Anyway, it would be terrific if vuetify provides a built-in option to enable route hashing when toggling dialog.

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.