Improve number trait. Closes #3132

src/domain_abstract/ui/Input.js

@@ -68,13 +68,14 @@ export default Backbone.View.extend({
    */
   getInputEl() {
     if (!this.inputEl) {
-      const { model } = this;
+      const { model, opts } = this;
+      const type = opts.type || 'text';
       const plh =
         model.get('placeholder') ||
         model.get('defaults') ||
         model.get('default') ||
         '';
-      this.inputEl = $(`<input type="text" placeholder="${plh}">`);
+      this.inputEl = $(`<input type="${type}" placeholder="${plh}">`);
     }
 
     return this.inputEl.get(0);

src/styles/scss/_gjs_inputs.scss

@@ -68,6 +68,16 @@
       }
     }
 
+    input[type=number] {
+      -moz-appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+
     &-range {
       flex: 9 1 auto;
     }

src/trait_manager/view/TraitNumberView.js

@@ -18,16 +18,18 @@ export default TraitView.extend({
    */
   getInputEl() {
     if (!this.input) {
-      var value = this.getModelValue();
-      var inputNumber = new InputNumber({
-        contClass: this.ppfx + 'field-int',
-        model: this.model,
-        ppfx: this.ppfx
+      const { ppfx, model } = this;
+      const value = this.getModelValue();
+      const inputNumber = new InputNumber({
+        contClass: `${ppfx}field-int`,
+        type: 'number',
+        model: model,
+        ppfx
       });
       this.input = inputNumber.render();
       this.$input = this.input.inputEl;
       this.$unit = this.input.unitEl;
-      this.model.set('value', value, { fromTarget: 1 });
+      model.set('value', value, { fromTarget: 1 });
       this.$input.val(value);
       this.input = inputNumber.el;
     }