[PATCH yew-widget-toolkit] widget: dialog: prevent Escape from closing non-closable modals

[PATCH yew-widget-toolkit] widget: dialog: prevent Escape from closing non-closable modals

[Dominik Csapak]

Pressing Escape on a <dialog> triggers the browser's native close
handling regardless of whether our code considers the dialog closable.
When the dialog has no 'on_close' callback (e.g. a Login Window), this
leaves our component state and the native dialog state out of sync: the
browser treats the dialog as closed, while our widget is still rendered
but without the corresponding 'open' CSS class (which hides the
backdrop).

Intercept the KeyDown event and call stop_propagation()/
prevent_default() for Escape whenever the dialog isn't closable,
so the browser never fires its native close in the first place.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/widget/dialog.rs | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/widget/dialog.rs b/src/widget/dialog.rs
index 4afecb2..9ee5e3f 100644
--- a/src/widget/dialog.rs
+++ b/src/widget/dialog.rs
@@ -114,6 +114,7 @@ impl Dialog {
 
 pub enum Msg {
     Open,
+    KeyDown(KeyboardEvent),
     Close,
     PointerDown(PointerEvent),
     PointerMove(PointerEvent),
@@ -213,6 +214,14 @@ impl Component for PwtDialog {
                     }
                 }
             }
+            Msg::KeyDown(event) => {
+                // prevent autoclosing of modal windows that can't be closed
+                if event.key() == "Escape" && (!self.open || props.on_close.is_none()) {
+                    log::info!("prevented closing");
+                    event.stop_propagation();
+                    event.prevent_default();
+                }
+            }
             Msg::Close => {
                 if self.open {
                     if let Some(on_close) = &props.on_close {
@@ -460,6 +469,8 @@ impl Component for PwtDialog {
             Msg::Close
         });
 
+        let onkeydown = link.callback(Msg::KeyDown);
+
         let mut panel = Panel::new()
             .class("pwt-overflow-auto")
             .class("pwt-flex-fill")
@@ -533,6 +544,7 @@ impl Component for PwtDialog {
         let dialog = Container::from_tag("dialog")
             .class("pwt-outer-dialog")
             .onpointerdown(onpointerdown)
+            .onkeydown(onkeydown)
             .onclose(onclose)
             .ontouchstart(cancel_event.clone())
             .ontouchend(cancel_event.clone())
-- 
2.47.3

superseded: [PATCH yew-widget-toolkit] widget: dialog: prevent Escape from closing non-closable modals

[Dominik Csapak]

superseded by v2: 
https://lore.proxmox.com/yew-devel/20260709141455.623886-1-d.csapak@proxmox.com/T/#u