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.

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

Issues with modals being used in routes #1167

Closed
JamieLottering opened this Issue Oct 6, 2017 · 4 comments

Comments

Projects
None yet
2 participants
@JamieLottering

JamieLottering commented Oct 6, 2017

Use Case

Our app has a lot of modals that are child routes of our index page. That way you can go to something like /login and have a login modal appear overlaid on top of the existing index page. You can use the back/forward button to open and close modals this way as well.

When these modals are closed they will typically go back or to some specified route by calling this.$router.push({ something something }).

For example, I click 'login' and the router goes to localhost/login. The component for this route is something like

<b-modal visible @hidden="navigateRouteAway"> ... </b-modal>

The Problem

When a bootstrap-vue modal opens it adds 15 pixels of padding to the body element and disables scrolling by setting overflow: hidden.

When we navigate away from the modal using the back button the padding and modal-open class remains on the body element.

Here is a video demonstrating the problem
As you can see, the page is initially scrollable with no spacing on the right of the body. When the modal is open, scrolling is disabled and spacing is added. When I click the back button, spacing and overflow: hidden remain.

Proposed solution

bootstrap-vue modals need to remove the body classes and cleanup code not only when explicitly hidden but also when destroyed.

@JamieLottering

This comment has been minimized.

JamieLottering commented Oct 6, 2017

Edit:

Just as an FYI in my route components if I add a ref to the <b-modal /> and call onAfterLeave in the beforeDestroy lifecycle hook it works correctly but I feel like this is something that should be a default behavior of <b-modal />

<script>
export default {
...
  beforeDestroy () {
    this.$refs.modal.onAfterLeave()
  }
}
</script>
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Oct 6, 2017

Thanks for bringing this up...
Probably calling the routines that adjust the window/nav paddings/margins in beforeDetroy() and also deactivated() (in case the modal is inside a <keep-alive>) would be a good idea (and re-instantiate the adjustments on activated() as well for <keep-alive> if the modal is still open).

@JamieLottering

This comment has been minimized.

JamieLottering commented Oct 6, 2017

@tmorehouse Thank you for the response. Looks like in the meantime I can get this working by calling onAfterLeave manually

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Oct 6, 2017

We can do a quick fix by addinga beforeDetroy() hook. Will have to play around with the activated/deactivated hooks as they would require a bit more logic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment