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

[PATCH yew-widget-toolkit v2] 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>
---
changes from v1:
* drop the leftover debug log::info line

 src/widget/dialog.rs | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/widget/dialog.rs b/src/widget/dialog.rs
index 4afecb2..c970009 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,13 @@ 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()) {
+                    event.stop_propagation();
+                    event.prevent_default();
+                }
+            }
             Msg::Close => {
                 if self.open {
                     if let Some(on_close) = &props.on_close {
@@ -460,6 +468,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 +543,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