- CSS for modal dialog

- User can click outside modal dialog to close it

frontend/src/modal_dialog.rs

@@ -1,5 +1,5 @@
 use futures::{future::FutureExt, pin_mut, select};
-use web_sys::{Element, HtmlDialogElement};
+use web_sys::{Element, HtmlDialogElement, Node};
 
 use crate::{
     on_click,
@@ -25,20 +25,17 @@ where
 /// Show a modal dialog with a copy of the given HTML element as content and execute an initilizer
 /// to modify the given content.
 /// Call the given function when OK is pressed.
-pub async fn show_and_initialize_with_ok<T, V, W, U>(
+pub async fn show_and_initialize_with_ok<FInit, TInit, FOk, TOk>(
     element_selector: &str,
-    initializer: T,
-    ok: V,
-) -> Option<W>
+    initializer: FInit,
+    ok: FOk,
+) -> Option<TOk>
 where
-    T: AsyncFn(Element) -> U,
-    V: Fn(Element, U) -> W,
+    FInit: AsyncFn(Element) -> TInit,
+    FOk: Fn(Element, TInit) -> TOk,
 {
     let dialog: HtmlDialogElement = by_id("modal-dialog");
 
-    let input_ok: Element = dialog.selector(".ok");
-    let input_cancel: Element = dialog.selector(".cancel");
-
     let content_element = dialog.selector::<Element>(".content");
 
     let element: Element = selector_and_clone(element_selector);
@@ -46,16 +43,25 @@ where
     content_element.append_child(&element).unwrap();
     let init_result = initializer(element.clone()).await;
 
+    let input_ok: Element = dialog.selector(".ok");
+    let input_cancel: Element = dialog.selector(".cancel");
+
     dialog.show_modal().unwrap();
 
     let click_ok = on_click::OnClick::new(&input_ok).fuse();
     let click_cancel = on_click::OnClick::new(&input_cancel).fuse();
 
-    pin_mut!(click_ok, click_cancel);
+    let dialog_cloned = dialog.clone();
+    let click_dialog =
+        on_click::OnClick::new_with_filter(&dialog, move |node| node == &dialog_cloned as &Node)
+            .fuse();
+
+    pin_mut!(click_ok, click_cancel, click_dialog);
 
     let result = select! {
         () = click_ok => Some(ok(element, init_result)),
         () = click_cancel => None,
+        () = click_dialog => None,
     };
 
     dialog.close();