dialogs no longer close themselves when clicking into an inactive child

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;

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();
 }