FEATURE: Use native number fields for integer inputs (#24984)

We had our own implementation of number fields in Ember, extended from text fields. Number inputs are now widely supported in browsers, and we can fall back on the native implementation which will be a better experience in almost all cases.

One thing traded off here is number fields can't have a placeholder, but that is intentional. We aren't using that ability anywhere, and we probably only kept it because we're extending text fields.

With this change we can get rid of the entire .js file, since there's no custom behaviour, and just make NumberField a template.

app/assets/javascripts/discourse/app/components/edit-category-settings.hbs

@@ -5,9 +5,8 @@
         {{i18n "category.position"}}
       </label>
       <NumberField
-        @number={{this.category.position}}
+        @value={{this.category.position}}
         @id="category-position"
-        @type="number"
         @min="0"
         class="position-input"
       />
@@ -36,9 +35,8 @@
       {{/if}}
     </label>
     <NumberField
-      @number={{this.category.num_featured_topics}}
+      @value={{this.category.num_featured_topics}}
       @id="category-number-featured-topics"
-      @type="number"
       @min="1"
     />
   </section>
@@ -187,9 +185,8 @@
       {{i18n "category.num_auto_bump_daily"}}
     </label>
     <NumberField
-      @number={{this.category.category_setting.num_auto_bump_daily}}
+      @value={{this.category.category_setting.num_auto_bump_daily}}
       @id="category-number-daily-bump"
-      @type="number"
       @min="0"
     />
   </section>
@@ -199,9 +196,8 @@
       {{i18n "category.auto_bump_cooldown_days"}}
     </label>
     <NumberField
-      @number={{this.category.category_setting.auto_bump_cooldown_days}}
+      @value={{this.category.category_setting.auto_bump_cooldown_days}}
       @id="category-auto-bump-cooldown-days"
-      @type="number"
       @min="0"
     />
   </section>

app/assets/javascripts/discourse/app/components/modal/reorder-categories.hbs

@@ -21,7 +21,7 @@
             <td>
               <div class="reorder-categories-actions">
                 <NumberField
-                  @number={{readonly category.position}}
+                  @value={{readonly category.position}}
                   @change={{fn this.change category}}
                   @min="0"
                 />

app/assets/javascripts/discourse/app/components/number-field.hbs

@@ -0,0 +1,8 @@
+<Input
+  id={{@id}}
+  class={{@classNames}}
+  min={{@min}}
+  max={{@max}}
+  @type="number"
+  @value={{@value}}
+/>

app/assets/javascripts/discourse/app/components/number-field.js

@@ -1,49 +0,0 @@
-import TextField from "discourse/components/text-field";
-import { allowOnlyNumericInput } from "discourse/lib/utilities";
-import discourseComputed from "discourse-common/utils/decorators";
-import I18n from "discourse-i18n";
-
-export default TextField.extend({
-  classNameBindings: ["invalid"],
-
-  keyDown: function (event) {
-    allowOnlyNumericInput(event, this._minNumber && this._minNumber < 0);
-  },
-
-  get _minNumber() {
-    if (!this.get("min")) {
-      return;
-    }
-    return parseInt(this.get("min"), 10);
-  },
-
-  get _maxNumber() {
-    if (!this.get("max")) {
-      return;
-    }
-    return parseInt(this.get("max"), 10);
-  },
-
-  @discourseComputed("number")
-  value: {
-    get(number) {
-      return parseInt(number, 10);
-    },
-    set(value) {
-      const num = parseInt(value, 10);
-      if (isNaN(num)) {
-        this.set("invalid", true);
-        return value;
-      } else {
-        this.set("invalid", false);
-        this.set("number", num);
-        return num.toString();
-      }
-    },
-  },
-
-  @discourseComputed("placeholderKey")
-  placeholder(key) {
-    return key ? I18n.t(key) : "";
-  },
-});