From c5a935474b047880ec1249490280dc36ae76ae34 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Wed, 8 Feb 2023 00:11:12 +0100
Subject: [PATCH] web/elements: improve consistency in row selection in table

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 web/src/elements/table/Table.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index 67369571ad..682329cbaf 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -292,11 +292,15 @@ export abstract class Table<T> extends AKElement {
 
     private renderRowGroup(items: T[]): TemplateResult[] {
         return items.map((item) => {
-            const itemSelectHandler = (ev?: InputEvent | PointerEvent) => {
+            const itemSelectHandler = (ev: InputEvent | PointerEvent) => {
                 let checked = false;
-                if (ev instanceof InputEvent) {
-                    checked = (ev.target as HTMLInputElement).checked;
+                const target = ev.target as HTMLElement;
+                if (ev.type === "input") {
+                    checked = (target as HTMLInputElement).checked;
                 } else if (ev instanceof PointerEvent) {
+                    if (target.classList.contains("ignore-click")) {
+                        return;
+                    }
                     checked = this.selectedElements.indexOf(item) === -1;
                 }
                 if (checked) {
@@ -335,11 +339,15 @@ export abstract class Table<T> extends AKElement {
                 >
                     ${this.checkbox
                         ? html`<td class="pf-c-table__check" role="cell">
-                              <label
+                              <label class="ignore-click"
                                   ><input
                                       type="checkbox"
+                                      class="ignore-click"
                                       .checked=${this.selectedElements.indexOf(item) >= 0}
                                       @input=${itemSelectHandler}
+                                      @click=${(ev: Event) => {
+                                          ev.stopPropagation();
+                                      }}
                               /></label>
                           </td>`
                         : html``}
@@ -351,7 +359,8 @@ export abstract class Table<T> extends AKElement {
                                   ) > -1
                                       ? "pf-m-expanded"
                                       : ""}"
-                                  @click=${() => {
+                                  @click=${(ev: Event) => {
+                                      ev.stopPropagation();
                                       const idx = this.expandedElements.indexOf(item);
                                       if (idx <= -1) {
                                           // Element is not expanded, add it