From 27aed4b3158cfea0b35837f1cb0be9aa7364abc2 Mon Sep 17 00:00:00 2001
From: Dominic R <dominic@sdko.org>
Date: Wed, 26 Mar 2025 13:16:46 -0400
Subject: [PATCH] web: ensure wizard modal closes on first cancel click
 (#13636)

The application wizard modal previously required two clicks of the cancel
button to close when opened from the User Interface.
This was caused by improper event handling where events
would propagate up the DOM tree potentially triggering multiple handlers.
---
 web/src/elements/wizard/Wizard.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/elements/wizard/Wizard.ts b/web/src/elements/wizard/Wizard.ts
index e2a4d63ee3..1c961e4094 100644
--- a/web/src/elements/wizard/Wizard.ts
+++ b/web/src/elements/wizard/Wizard.ts
@@ -187,7 +187,11 @@ export class Wizard extends ModalButton {
     /**
      * Reset the wizard to it's initial state.
      */
-    reset = () => {
+    reset = (ev?: Event) => {
+        if (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
         this.open = false;
 
         this.querySelectorAll("[data-wizardmanaged=true]").forEach((el) => {
@@ -245,7 +249,7 @@ export class Wizard extends ModalButton {
                           class="pf-c-button pf-m-plain pf-c-wizard__close"
                           type="button"
                           aria-label="${msg("Close")}"
-                          @click=${this.reset}
+                          @click=${(ev: Event) => this.reset(ev)}
                       >
                           <i class="fas fa-times" aria-hidden="true"></i>
                       </button>`
@@ -332,9 +336,7 @@ export class Wizard extends ModalButton {
                               <button
                                   class="pf-c-button pf-m-link"
                                   type="button"
-                                  @click=${() => {
-                                      this.reset();
-                                  }}
+                                  @click=${(ev: Event) => this.reset(ev)}
                               >
                                   ${msg("Cancel")}
                               </button>