From 6f830ac10998f8fedbd097904e6b5b95d88fd7e1 Mon Sep 17 00:00:00 2001
From: Jakob Pinterits <jakob.pinterits@gmail.com>
Date: Wed, 2 Oct 2024 19:19:14 +0200
Subject: [PATCH] dialogs no longer close themselves when clicking into an
 inactive child

---
 frontend/code/components/dialog_container.ts | 18 ++++++++++++++++++
 frontend/css/style.scss                      |  5 +++++
 2 files changed, 23 insertions(+)

diff --git a/frontend/code/components/dialog_container.ts b/frontend/code/components/dialog_container.ts
index b16cd4d0..e926844b 100644
--- a/frontend/code/components/dialog_container.ts
+++ b/frontend/code/components/dialog_container.ts
@@ -35,6 +35,24 @@ export class DialogContainerComponent extends ComponentBase {
         element.addEventListener("click", (event) => {
             markEventAsHandled(event);
 
+            // Don't close the dialog if the click was inside the dialog. This
+            // is a bit tricky, because of various cases:
+            //
+            // - The click was handled by a component inside of the dialog (e.g.
+            //   a Button). This is simple, since the event will never reach the
+            //   dialog container.
+            // - The click was onto a component in the dialog, but not handled.
+            //   (Think a `rio.Card`). This must be detected and the dialog NOT
+            //   closed.
+            // - The click was technically into a component, but that component
+            //   doesn't accept clicks. (Think the spacing of a `rio.Row`.)
+            //   Since no component was technically clicked, the dialog should
+            //   close.
+            //
+            if (event.target !== element) {
+                return;
+            }
+
             // Is the dialog user-closable?
             if (!this.state.is_user_closable) {
                 return;
diff --git a/frontend/css/style.scss b/frontend/css/style.scss
index d057347b..ec2a1033 100644
--- a/frontend/css/style.scss
+++ b/frontend/css/style.scss
@@ -269,6 +269,11 @@ select {
 
 // All components
 .rio-component {
+    // This class isn't directly assigned to the element created by a component,
+    // but rather a `div` further out, that houses the margin & alignment. It
+    // thus shouldn't receive any pointer events.
+    pointer-events: none;
+
     @include shared-component-style();
 }