[Bug Report] Dialog won't behave as modal when hide-overlay prop is true

[wallslide]

Environment

Vuetify Version: 2.0.10
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10

Steps to reproduce

Set both the persistent and hide-overlay props to true on a Dialog

Expected Behavior

The Dialog will persist even when the user clicks outside of it.

Actual Behavior

The Dialog gets dismissed when the user clicks outside of it.

Reproduction Link

https://codepen.io/wallslide/pen/BaBpZbR

[KaelWD]

Related: #8640

[FelixINX]

I think the problem is in the following bit :

vuetify/packages/vuetify/src/components/VDialog/VDialog.ts

Lines 169 to 179 in 51a0336

	if (this.persistent && this.overlay) {
	if (
	!this.noClickAnimation &&
	(
	this.overlay.$el === target ||
	this.overlay.$el.contains(target)
	)
	) this.animateClick()
	return false
	}

It probably broke on v2.0.8 (652ba11) when this.overlay was added as a requirement for this function.

[LujienZ]

I reproduce the same issue with Persistent and Fullscreen.

Reproduction Link
Work: (Just click on pin)
https://codepen.io/lujienz/pen/KKPozgw
Does not work : (Just click on pin)
https://codepen.io/lujienz/pen/VwZXaKx

[Zyles]

I have this problem. The overlay stays even tho I close the dialog.

[ErikMikkelson]

Here's a workaround for people wanting to use bottom sheet with persist and hide-overlay in the meantime.. We extend VBottomSheet with a new control that operates correctly. The export as any makes it work with vue-property-decorator.

import { VBottomSheet } from "vuetify/lib";

export default {
    extends: VBottomSheet,

    methods: {
        closeConditional(_e: Event) {
            return false;
        }
    }
} as any;

[depsimon]

Thanks @ErikMikkelson this made the trick!

[depsimon]

Also, it might be useful to override the hideScroll() method to let the user scroll in the interface.

[wussup]

Still not working, version 2.1.12.

<v-bottom-sheet v-model="sheet"
                  scrollable
                  hide-overlay
                  persistent>
    <v-card>...</vcard>
</v-bottom-sheet>

When I click outside the dialog, then the dialog is clothing.

Any thoughts?

EDIT:
My bad, I placed v-bottom-sheet in the wrong place.

[jacekkarczmarczyk]

This issue have been fixed, please create a new one for bottom sheet problem

[alexandruradovici]

I have created an issue (#9242) for some time for this problem, should I reopen it or create a new one?

[jacekkarczmarczyk]

#9242 is fixed: https://codepen.io/jkarczm/pen/WNbNXNq

[alexandruradovici]

Thanks, seems to work in codepen, will try it in our application.

…

On Mon, Dec 2, 2019 at 7:16 PM Jacek Karczmarczyk ***@***.***> wrote: #9242 <#9242> is fixed: https://codepen.io/jkarczm/pen/WNbNXNq — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#8697?email_source=notifications&email_token=AAVU5IL72RMHN7YC3ITZKMDQWU7GRA5CNFSM4IO3B2BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFUGYIQ#issuecomment-560491554>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVU5IOFSX2GGDJNSVAUCCLQWU7GRANCNFSM4IO3B2BA> .

-- Alexandru RADOVICI Universitatea "Politehnica" din Bucuresti e-mail: alex@ipworkshop.ro telefon: 0742061223 www.ipworkshop.ro

[nikilp]

when both persistent and hide-overlay are set, the page can be scrolled, which i believe is not the intended case