From fb76ca0356bf7df28ac840034645c939e5545b46 Mon Sep 17 00:00:00 2001
From: hannajones <jones.hanna.m@gmail.com>
Date: Thu, 14 Dec 2023 13:14:32 -0500
Subject: [PATCH] switch to a deactivate method

---
 .../sumo/static/sumo/js/form-wizard-sign-in-step.js    | 10 ++++++----
 kitsune/sumo/static/sumo/js/form-wizard.js             | 10 +++++++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/kitsune/sumo/static/sumo/js/form-wizard-sign-in-step.js b/kitsune/sumo/static/sumo/js/form-wizard-sign-in-step.js
index 6f305c8d71a..74d5d39c004 100644
--- a/kitsune/sumo/static/sumo/js/form-wizard-sign-in-step.js
+++ b/kitsune/sumo/static/sumo/js/form-wizard-sign-in-step.js
@@ -69,7 +69,7 @@ export class SignInStep extends BaseFormStep {
     this.#formEl.addEventListener("submit", this);
     this.#emailEl.addEventListener("blur", this);
     this.#emailEl.addEventListener("input", this);
-    this.activate();
+    this.#emailEl.focus();
   }
 
   disconnectedCallback() {
@@ -79,9 +79,11 @@ export class SignInStep extends BaseFormStep {
     this.#emailEl.removeEventListener("input", this);
   }
 
-  activate() {
-    this.#emailErrorEl.classList.remove("visible");
-    this.#emailEl.focus();
+  deactivate() {
+    if (this.shadowRoot.activeElement == this.#emailEl) {
+      this.#emailEl.blur();
+      this.#emailErrorEl.classList.remove("visible");
+    }
   }
 
   handleEvent(event) {
diff --git a/kitsune/sumo/static/sumo/js/form-wizard.js b/kitsune/sumo/static/sumo/js/form-wizard.js
index 40da701ef85..341e4b07e13 100644
--- a/kitsune/sumo/static/sumo/js/form-wizard.js
+++ b/kitsune/sumo/static/sumo/js/form-wizard.js
@@ -302,9 +302,9 @@ export class FormWizard extends HTMLElement {
       let name = step.getAttribute("name");
       if (name === activeStep) {
         step.slot = "active";
-        step.activate && step.activate();
       } else {
         step.slot = "";
+        step.deactivate && step.deactivate();
       }
     }
   }
@@ -425,6 +425,14 @@ export class BaseFormStep extends HTMLElement {
     this.render(prevState, this.#state);
   }
 
+  /**
+   * Method that can be implemented to handle any clean up needed when a form
+   * step is no longer active e.g. clearing error states.
+   */
+  deactivate() {
+    // NOOP
+  }
+
   /**
    * Method that gets run whenever the element's state changes. Can be used to
    * specify how the DOM should update in response to state changes. `prevState`