Fix deprecations && invalid field handling

assets/javascripts/discourse/components/custom-wizard-date-input.js.es6

@@ -3,6 +3,7 @@ import discourseComputed from "discourse-common/utils/decorators";
 
 export default DateInput.extend({
   useNativePicker: false,
+  classNameBindings: ["fieldClass"],
 
   @discourseComputed()
   placeholder() {

assets/javascripts/discourse/components/custom-wizard-date-time-input.js.es6

@@ -2,6 +2,8 @@ import DateTimeInput from "discourse/components/date-time-input";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default DateTimeInput.extend({
+  classNameBindings: ["fieldClass"],
+
   @discourseComputed("timeFirst", "tabindex")
   timeTabindex(timeFirst, tabindex) {
     return timeFirst ? tabindex : tabindex + 1;

assets/javascripts/discourse/components/custom-wizard-field-time.js.es6

@@ -2,6 +2,8 @@ import Component from "@ember/component";
 import { observes } from "discourse-common/utils/decorators";
 
 export default Component.extend({
+  classNameBindings: ['fieldClass'],
+
   @observes("time")
   setValue() {
     this.set("field.value", this.time.format(this.field.format));

assets/javascripts/discourse/components/custom-wizard-field-upload.js.es6

@@ -4,7 +4,7 @@ import { computed } from "@ember/object";
 
 export default Component.extend(UppyUploadMixin, {
   classNames: ["wizard-field-upload"],
-  classNameBindings: ["isImage"],
+  classNameBindings: ["isImage", "fieldClass"],
   uploading: false,
   type: computed(function () {
     return `wizard_${this.field.id}`;

assets/javascripts/discourse/components/custom-wizard-field-user-selector.js.es6

@@ -1,3 +1,5 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default Component.extend({
+  classNameBindings: ['fieldClass']
+});

assets/javascripts/discourse/components/custom-wizard-step.js.es6

@@ -9,6 +9,7 @@ import CustomWizard, {
   updateCachedWizard,
 } from "discourse/plugins/discourse-custom-wizard/discourse/models/custom-wizard";
 import { alias, not } from "@ember/object/computed";
+import discourseLater from "discourse-common/lib/later";
 
 const alreadyWarned = {};
 
@@ -110,29 +111,24 @@ export default Component.extend({
   },
 
   autoFocus() {
-    schedule("afterRender", () => {
+    discourseLater(() => {
-      const $invalid = $(
+      schedule("afterRender", () => {
-        ".wizard-field.invalid:nth-of-type(1) .wizard-focusable"
+        if ($(".invalid .wizard-focusable").length) {
-      );
+          this.animateInvalidFields();
-
+        } else {
-      if ($invalid.length) {
+          $(".wizard-focusable:first").focus();
-        return $invalid.focus();
+        }
-      }
+      });
-
-      $(".wizard-focusable:first").focus();
     });
   },
 
   animateInvalidFields() {
     schedule("afterRender", () => {
-      let $element = $(
+      let $invalid = $(".invalid .wizard-focusable");
-        ".invalid input[type=text],.invalid textarea,.invalid input[type=checkbox],.invalid .select-kit"
+      if ($invalid.length) {
-      );
-
-      if ($element.length) {
         $([document.documentElement, document.body]).animate(
           {
-            scrollTop: $element.offset().top - 200,
+            scrollTop: $invalid.offset().top - 200,
           },
           400
         );

assets/javascripts/discourse/models/custom-wizard-field.js.es6

@@ -72,7 +72,7 @@ export default EmberObject.extend(ValidState, {
       valid = true;
     }
 
-    this.setValid(valid);
+    this.setValid(Boolean(valid));
 
     return valid;
   },

assets/javascripts/discourse/templates/components/custom-wizard-date-input.hbs

@@ -1,11 +1,11 @@
-{{input
+<Input
-  type=inputType
+  @type={{this.inputType}}
+  @value={{readonly this.value}}
   class="date-picker"
-  placeholder=placeholder
+  placeholder={{this.placeholder}}
-  value=(readonly value)
+  tabindex={{this.tabindex}}
-  input=(action "onChangeDate")
+  {{on "input" (action "onChangeDate")}}
-  tabindex=tabindex
   autocomplete="off"
-}}
+/>
 
 <div class="picker-container"></div>

assets/javascripts/discourse/templates/components/custom-wizard-field-category.hbs

@@ -1,5 +1,6 @@
 {{custom-wizard-category-selector
   categories=categories
+  class=fieldClass
   whitelist=field.content
   onChange=(action (mut categories))
   tabindex=field.tabindex

assets/javascripts/discourse/templates/components/custom-wizard-field-checkbox.hbs

@@ -1 +1,7 @@
-{{input type="checkbox" id=field.id checked=field.value tabindex=field.tabindex}}
+<Input
+  id={{this.field.id}}
+  @type="checkbox"
+  @checked={{this.field.value}}
+  tabindex={{this.field.tabindex}}
+  class={{this.fieldClass}}
+/>

assets/javascripts/discourse/templates/components/custom-wizard-field-composer.hbs

@@ -2,6 +2,7 @@
   field=field
   composer=composer
   wizard=wizard
+  fieldClass=fieldClass
   groupsMentioned=(action "groupsMentioned")
   cannotSeeMention=(action "cannotSeeMention")
   importQuote=(action "importQuote")

assets/javascripts/discourse/templates/components/custom-wizard-field-group.hbs

@@ -1,5 +1,6 @@
 {{custom-wizard-group-selector
   groups=site.groups
+  class=fieldClass
   field=field
   whitelist=field.content
   value=field.value

assets/javascripts/discourse/templates/components/custom-wizard-field-number.hbs

@@ -1 +1,9 @@
-{{input type="number" step="0.01" id=field.id value=field.value tabindex=field.tabindex}}
+<Input
+  id={{this.field.id}}
+  step="0.01"
+  @type="number"
+  @value={{this.field.value}}
+  tabindex={{this.field.tabindex}}
+  class={{this.fieldClass}}
+/>
+

assets/javascripts/discourse/templates/components/custom-wizard-field-tag.hbs

@@ -1,5 +1,6 @@
 {{custom-wizard-tag-chooser
   tags=field.value
+  class=fieldClass
   tabindex=field.tabindex
   tagGroups=field.tag_groups
   everyTag=true

assets/javascripts/discourse/templates/components/custom-wizard-field-text.hbs

@@ -1 +1,8 @@
-{{input id=field.id value=field.value class=fieldClass placeholder=field.translatedPlaceholder tabindex=field.tabindex autocomplete=autocomplete}}
+<Input
+  id={{this.field.id}}
+  @value={{this.field.value}}
+  tabindex={{this.field.tabindex}}
+  class={{this.fieldClass}}
+  placeholder={{this.field.translatedPlaceholder}}
+  autocomplete={{this.autocomplete}}
+/>

assets/javascripts/discourse/templates/components/custom-wizard-field-textarea.hbs

@@ -1 +1,7 @@
-{{textarea id=field.id value=field.value class=fieldClass placeholder=field.translatedPlaceholder tabindex=field.tabindex}}
+<Textarea
+  id={{this.field.id}}
+  @value={{this.field.value}}
+  tabindex={{this.field.tabindex}}
+  class={{this.fieldClass}}
+  placeholder={{this.field.translatedPlaceholder}}
+/>

assets/javascripts/discourse/templates/components/custom-wizard-field-url.hbs

@@ -1 +1,6 @@
-{{input type="text" id=field.id value=field.value tabindex=field.tabindex}}
+<Input
+  id={{this.field.id}}
+  @value={{this.field.value}}
+  tabindex={{this.field.tabindex}}
+  class={{this.fieldClass}}
+/>

assets/stylesheets/common/wizard/field.scss

@@ -32,13 +32,8 @@ body.custom-wizard {
       }
     }
 
-    &.invalid {
+    &.invalid .wizard-focusable {
-      textarea,
+      outline: 4px solid var(--danger);
-      input[type="text"],
-      input[type="checkbox"],
-      .select-kit {
-        outline: 4px solid var(--danger);
-      }
     }
   }