From 1919a9dd7747de630d370e91d2b6b45b2fb23934 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Mon, 6 Feb 2023 16:47:46 +0100
Subject: [PATCH] web/elements: fix click propagation from modal into table

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/elements/buttons/ModalButton.ts |  7 ++++++-
 web/src/elements/table/Table.ts         | 14 +++-----------
 web/src/elements/table/TableModal.ts    |  7 ++++++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index dadb64f01..9dedc4263 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -107,7 +107,12 @@ export class ModalButton extends AKElement {
     }
 
     renderModal(): TemplateResult {
-        return html`<div class="pf-c-backdrop">
+        return html`<div
+            class="pf-c-backdrop"
+            @click=${(e: PointerEvent) => {
+                e.stopPropagation();
+            }}
+        >
             <div class="pf-l-bullseye">
                 <div
                     class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index 07c633976..67369571a 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -294,17 +294,9 @@ export abstract class Table<T> extends AKElement {
         return items.map((item) => {
             const itemSelectHandler = (ev?: InputEvent | PointerEvent) => {
                 let checked = false;
-                if (ev) {
-                    // Only register click events on a table row
-                    if (ev instanceof PointerEvent) {
-                        if ((ev.target as HTMLInputElement).tagName.toLowerCase() != "tr") {
-                            return;
-                        }
-                    } else if (ev instanceof InputEvent) {
-                        checked = (ev.target as HTMLInputElement).checked;
-                    }
-                } else {
-                    // If we have no event, toggle the state
+                if (ev instanceof InputEvent) {
+                    checked = (ev.target as HTMLInputElement).checked;
+                } else if (ev instanceof PointerEvent) {
                     checked = this.selectedElements.indexOf(item) === -1;
                 }
                 if (checked) {
diff --git a/web/src/elements/table/TableModal.ts b/web/src/elements/table/TableModal.ts
index b26fe3697..7ea6ee9eb 100644
--- a/web/src/elements/table/TableModal.ts
+++ b/web/src/elements/table/TableModal.ts
@@ -67,7 +67,12 @@ export abstract class TableModal<T> extends Table<T> {
     }
 
     renderModal(): TemplateResult {
-        return html`<div class="pf-c-backdrop">
+        return html`<div
+            class="pf-c-backdrop"
+            @click=${(e: PointerEvent) => {
+                e.stopPropagation();
+            }}
+        >
             <div class="pf-l-bullseye">
                 <div class="pf-c-modal-box ${this.size}" role="dialog" aria-modal="true">
                     <button