From 2222f6722e6773b69878a9412c9870d158253bc6 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 11 Aug 2023 20:47:55 -0700
Subject: [PATCH] Late addition: I had an inspiration about how to reduce the
 way reactivity broke focus by, basically, removing the reactivity and
 managing the first-time-through lifecycle to prevent the update from causing
 refocus.  It works well!  Now I just need to test it.

---
 web/src/admin/applications/wizard/BasePanel.ts     | 14 +++++++++++---
 .../applications/wizard/ak-application-wizard.ts   |  1 -
 .../ak-application-wizard-application-details.ts   |  2 ++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/admin/applications/wizard/BasePanel.ts b/web/src/admin/applications/wizard/BasePanel.ts
index f469a029d..3601b89f6 100644
--- a/web/src/admin/applications/wizard/BasePanel.ts
+++ b/web/src/admin/applications/wizard/BasePanel.ts
@@ -17,14 +17,22 @@ export class ApplicationWizardPageBase extends CustomEmitterElement(AKElement) {
     @query("form")
     form!: HTMLFormElement;
 
+    rendered = false;
+
     // @ts-expect-error
-    @consume({ context: applicationWizardContext, subscribe: true })
-    @state()
+    @consume({ context: applicationWizardContext })
     public wizard!: WizardState;
 
+    shouldUpdate(changedProperties: Map<string, any>) {
+        if (!this.rendered) {
+            this.rendered = true;
+            return true;
+        }
+        return (changedProperties.size !== 0)
+    }
+    
     dispatchWizardUpdate(update: Partial<WizardState>) {
         // TODO: Incorporate this into the message heading upward: "the current step is valid."
-        console.log(this.form.reportValidity());
 
         this.dispatchCustomEvent("ak-application-wizard-update", {
             ...this.wizard,
diff --git a/web/src/admin/applications/wizard/ak-application-wizard.ts b/web/src/admin/applications/wizard/ak-application-wizard.ts
index d5c3beb26..6882c2743 100644
--- a/web/src/admin/applications/wizard/ak-application-wizard.ts
+++ b/web/src/admin/applications/wizard/ak-application-wizard.ts
@@ -30,7 +30,6 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) {
      * Providing a context at the root element
      */
     @provide({ context: applicationWizardContext })
-    @property({ attribute: false })
     wizardState: WizardState = {
         step: 0,
         providerType: "",
diff --git a/web/src/admin/applications/wizard/application/ak-application-wizard-application-details.ts b/web/src/admin/applications/wizard/application/ak-application-wizard-application-details.ts
index 4ecdba6c1..2027caf86 100644
--- a/web/src/admin/applications/wizard/application/ak-application-wizard-application-details.ts
+++ b/web/src/admin/applications/wizard/application/ak-application-wizard-application-details.ts
@@ -31,7 +31,9 @@ export class ApplicationWizardApplicationDetails extends BasePanel {
         });
     }
 
+
     render(): TemplateResult {
+        console.log("HUH?");
         return html` <form class="pf-c-form pf-m-horizontal" @input=${this.handleChange}>
             <ak-text-input
                 name="name"