Vuetify: [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]

So is the plan for this to formalised into the framework OR is it expected that users use the work around from @FabianSilva ?

[amritk]

I would be willing to help work on something like this as I made one for angularjs1

[scriptcoded]

Any updates here?

[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.

[andrewlamyw]

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.

How did you solve it? Did you found a solution to that?

[clementmas]

Hey guys, is this feature on the roadmap for a future release?
The current back button behavior feels like a bug and is frustrating for most users.

I love Vuetify and if there's one suggestion I would make on the roadmap, it would be to focus more on bridging the gap between web apps and native apps with features like this and smooth swipe gestures :pray:

[xmorell]

Any news on this?

[tamirvs]

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

[ghost]

I usually create a child and open the dialog in there, before mount. Back works as usual.

[tamirvs]

@mariusvigariu what do you mean create a child?
like a new route for the dialog?

[ghost]

@tamirvs yea, sorry I'm used with the nuxtjs terminolgy, I was referring to a nuxt child .. but I guess its the same thing: create a new route where just the dialog is being rendered

[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?

[tamirvs]

@franciscouemura Yes I know about this problem, but unfortunately I couldn't find a solution yet.

[JorsMantilla]

I usually create a child and open the dialog in there, before mount. Back works as usual.

Could you tell me how you do this? please

[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.

[mertcanekiz]

@barryong Works beautifully, and I modified it slightly to work with navigation drawers as well. Thanks so much!

[JorsMantilla]

@barryong Thanks, I will try to implement it in nuxt.

[jtpmbr]

How to implement this mixin from @barryong in nuxt?
I am very new to vue,nuxt.

[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.