v-dialog persistent Prop: Detecting Blocked User-Initiated Close Attempts
0 reputation · 19 Dec 2023, 16:20 UTC
0 reputation · 19 Dec 2023, 16:20 UTC
Identify whether Vuetify's v-dialog component provides a mechanism to detect when a user attempts to close a persistent dialog via Escape key or overlay click, but the attempt is suppressed by the persistent prop.
The persistent prop on v-dialog prevents dismissal through Escape key presses and clicks outside the dialog overlay. However, programmatic closure via v-model updates remains possible regardless of the persistent setting. Vuetify emits update:modelValue for all closure attempts, but this event cannot distinguish between user-initiated and programmatic closures when persistent is enabled.
Vuetify's documented API does not expose a separate event, callback, or prop that signals a blocked user-initiated close attempt. The research indicates that update:modelValue fires for all closure triggers, but provides no metadata about whether the closure was actually processed or suppressed by the persistent prop.
v-dialog does not document a separate event, callback, or prop that distinguishes a blocked user-initiated close attempt from a successful programmatic closure while persistent is enabled.persistent prop was introduced in Vuetify 2. Available research indicates no user-gesture-detection change in Vuetify 3, but you should verify this against your installed major version because it affects the source path and workaround.Vuetify documents update:modelValue as the closure-related event for v-dialog. It fires for both user-initiated and programmatic closures and carries no metadata about the trigger or whether the dialog actually closed. The persistent prop is documented to block Escape key presses and clicks outside the dialog overlay.
The likely explanation is that Vuetify consumes the Escape keydown or overlay click internally when persistent is true, so the parent component never receives a distinct signal. Your application only sees update:modelValue, which cannot tell you whether the gesture was suppressed.
npm ls vuetify
userRequestedClose in your own click or keyboard handler before updating v-model, rather than inferring intent from update:modelValue.keydown listener for Escape or a click listener outside the dialog. This is fragile: it can fire before Vuetify consumes the event and may interfere with other components. Use it only as a temporary diagnostic.Inspect the installed dialog source for the persistent guard:
grep -R "persistent" node_modules/vuetify/lib/components/v-dialog
Then run a minimal sandbox with persistent set to true, press Escape, and confirm that update:modelValue emits no extra payload identifying the gesture.
Are you using Vuetify 2 or Vuetify 3? The version changes the source file to inspect and may affect the workaround, so confirming it will narrow the recommendation.
v-dialog without a custom wrapper or overridden close handler.Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.