FIX: Don't throw errors on wizard dropdowns (#16994)

app/assets/javascripts/wizard/components/styling-preview.js

@@ -4,7 +4,7 @@ import {
   darkLightDiff,
 } from "wizard/lib/preview";
 import I18n from "I18n";
-import { observes } from "discourse-common/utils/decorators";
+import { bind, observes } from "discourse-common/utils/decorators";
 
 const LOREM = `
 Lorem ipsum dolor sit amet, consectetur adipiscing.
@@ -20,6 +20,16 @@ export default createPreviewComponent(659, 320, {
   startX: 0,
   scrollLeft: 0,
 
+  init() {
+    this._super(...arguments);
+    this.wizard.on("homepageStyleChanged", this.onHomepageStyleChange);
+  },
+
+  willDestroy() {
+    this._super(...arguments);
+    this.wizard.off("homepageStyleChanged", this.onHomepageStyleChange);
+  },
+
   mouseDown(e) {
     const slider = this.element.querySelector(".previews");
     this.setProperties({
@@ -61,10 +71,11 @@ export default createPreviewComponent(659, 320, {
     this._super(...arguments);
 
     this.triggerRepaint();
+  },
 
-    if (this.stylingDropdown?.id === "homepage_style") {
+  @bind
+  onHomepageStyleChange() {
     this.set("previewTopic", false);
-    }
   },
 
   @observes("previewTopic")

app/assets/javascripts/wizard/components/wizard-field-dropdown.js

@@ -30,7 +30,10 @@ export default Component.extend({
   actions: {
     onChangeValue(value) {
       this.set("field.value", value);
-      this.stylingDropdownChanged(this.field.id, value);
+
+      if (this.field.id === "homepage_style") {
+        this.wizard.trigger("homepageStyleChanged");
+      }
     },
   },
 });

app/assets/javascripts/wizard/components/wizard-step.js

@@ -11,11 +11,6 @@ export default Component.extend({
   classNames: ["wizard-step"],
   saving: null,
 
-  init() {
-    this._super(...arguments);
-    this.set("stylingDropdown", {});
-  },
-
   didInsertElement() {
     this._super(...arguments);
     this.autoFocus();
@@ -117,10 +112,6 @@ export default Component.extend({
       document.location = getUrl("/");
     },
 
-    stylingDropdownChanged(id, value) {
-      this.set("stylingDropdown", { id, value });
-    },
-
     exitEarly() {
       const step = this.step;
       step.validate();

app/assets/javascripts/wizard/models/wizard.js

@@ -1,10 +1,11 @@
 import EmberObject from "@ember/object";
+import Evented from "@ember/object/evented";
 import Step from "wizard/models/step";
 import WizardField from "wizard/models/wizard-field";
 import { ajax } from "wizard/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 
-const Wizard = EmberObject.extend({
+const Wizard = EmberObject.extend(Evented, {
   @discourseComputed("steps.length")
   totalSteps: (length) => length,
 

app/assets/javascripts/wizard/templates/components/styling-preview.hbs

@@ -7,7 +7,6 @@
     {{homepage-preview
       wizard=wizard
       step=step
-      stylingDropdown=stylingDropdown
     }}
   </div>
 </div>

app/assets/javascripts/wizard/templates/components/wizard-field.hbs

@@ -15,11 +15,10 @@
 <div class="input-area">
   {{component
     inputComponentName
-    field=field step=step
+    field=field
+    step=step
     fieldClass=fieldClass
     wizard=wizard
-    stylingDropdownChanged=stylingDropdownChanged
-    stylingDropdown=stylingDropdown
   }}
 </div>
 

app/assets/javascripts/wizard/templates/components/wizard-step.hbs

@@ -22,7 +22,6 @@
               field=field
               step=step
               wizard=wizard
-              stylingDropdownChanged=(action "stylingDropdownChanged")
             }}
           {{/if}}
         {{/each}}
@@ -35,7 +34,6 @@
             field=field
             step=step
             wizard=wizard
-            stylingDropdown=stylingDropdown
           }}
         {{/unless}}
       {{/each}}