Native "blocking/modal" option for the Prompt (choice) Workflow action

#1

This follows up on an older thread (“Workflow Prompt - Exit”, Nov 2022 - Workflow Prompt - Exit) about users being able to dismiss or ignore a Workflow prompt, and the prompt reappearing on the next session if ignored.

We had a similar need: a “Prompt user with choice” step that requires an explicit confirmation before the user continues, and we wanted the rest of the screen to be visually blocked (dimmed backdrop) while the prompt is open, plus we removed the native close (“X”) icon so users can’t accidentally dismiss it - directly to avoid the exact issue reported in that 2022 thread.

We managed to achieve this entirely with Custom CSS (Admin > Settings > Theming), no frontend/core changes:

  • A :has() selector detects when a wfPromptToast-* toast is present inside the toaster and renders a fixed, full-screen backdrop behind it.
  • The toaster is raised above the backdrop via z-index so the prompt stays interactive.
  • The native .close (X) icon on the toast header is hidden.

This works, but we hit two things that CSS alone can’t solve:

  1. Keyboard Tab navigation can still reach elements behind the backdrop (CSS pointer-events doesn’t affect tab order). We worked around this with a small Code Snippet using the inert attribute + a MutationObserver, but this really feels like it belongs in the component itself.
  2. Our whole approach depends on DOM details we found by inspecting the browser (toast id prefix, class names) rather than a documented, stable contract - so it could silently break on a future release.

Question for the team: is there any roadmap plan to add a native boolean parameter to the “Prompt user with choice” Workflow action (something like blocking / modal / disableDismiss) so the frontend renders it as a proper blocking modal - full backdrop, focus trap, no close icon - without needing CSS/JS workarounds? This would also directly close the gap raised in the 2022 thread about prompts being dismissed/ignored unintentionally.

Happy to share our CSS/JS workaround in more detail if it’s useful as a reference, or as a starting point for a PR if that’s welcome.

Thanks!