web/elements: fix click propagation from modal into table

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-02-06 16:47:46 +01:00
parent b3323c5d00
commit 1919a9dd77
No known key found for this signature in database
3 changed files with 15 additions and 13 deletions

View File

@ -107,7 +107,12 @@ export class ModalButton extends AKElement {
} }
renderModal(): TemplateResult { 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-l-bullseye">
<div <div
class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}" class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"

View File

@ -294,17 +294,9 @@ export abstract class Table<T> extends AKElement {
return items.map((item) => { return items.map((item) => {
const itemSelectHandler = (ev?: InputEvent | PointerEvent) => { const itemSelectHandler = (ev?: InputEvent | PointerEvent) => {
let checked = false; let checked = false;
if (ev) { if (ev instanceof InputEvent) {
// 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; checked = (ev.target as HTMLInputElement).checked;
} } else if (ev instanceof PointerEvent) {
} else {
// If we have no event, toggle the state
checked = this.selectedElements.indexOf(item) === -1; checked = this.selectedElements.indexOf(item) === -1;
} }
if (checked) { if (checked) {

View File

@ -67,7 +67,12 @@ export abstract class TableModal<T> extends Table<T> {
} }
renderModal(): TemplateResult { 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-l-bullseye">
<div class="pf-c-modal-box ${this.size}" role="dialog" aria-modal="true"> <div class="pf-c-modal-box ${this.size}" role="dialog" aria-modal="true">
<button <button