FIX: allow entering 0.002 in number inputs

frontend/discourse/app/form-kit/components/fk/control/input.gjs

@@ -46,14 +46,40 @@ export default class FKControlInput extends Component {
     return this.args.type ?? "text";
   }
 
+  get displayValue() {
+    if (this.type === "number" && this.inputValue !== undefined) {
+      return this.inputValue;
+    }
+
+    return this.args.field.value ?? "";
+  }
+
+  @action
+  handleFocus() {
+    if (this.type === "number") {
+      this.inputValue = this.args.field.value ?? "";
+    }
+  }
+
+  @action
+  handleBlur() {
+    this.inputValue = undefined;
+  }
+
   @action
   handleInput(event) {
+    const rawValue = event.target.value;
+
+    if (this.type === "number") {
+      this.inputValue = rawValue;
+    }
+
     const value =
-      event.target.value === ""
+      rawValue === ""
         ? null
         : this.type === "number"
-          ? parseFloat(event.target.value)
-          : event.target.value;
+          ? parseFloat(rawValue)
+          : rawValue;
 
     this.args.field.set(value);
   }
@@ -66,14 +92,16 @@ export default class FKControlInput extends Component {
 
       <input
         type={{this.type}}
-        value={{@field.value}}
+        value={{this.displayValue}}
         class={{concatClass
           "form-kit__control-input"
           (if @before "has-prefix")
           (if @after "has-suffix")
         }}
         disabled={{@field.disabled}}
         ...attributes
+        {{on "focus" this.handleFocus}}
+        {{on "blur" this.handleBlur}}
         {{on "input" this.handleInput}}
       />
 

frontend/discourse/tests/integration/components/form-kit/controls/input-number-test.gjs

@@ -17,7 +17,7 @@ module(
         <template>
           <Form @onSubmit={{mutateData}} @data={{data}} as |form|>
             <form.Field @name="foo" @title="Foo" as |field|>
-              <field.Input @type="number" />
+              <field.Input @type="number" step="any" lang="en" />
             </form.Field>
           </Form>
         </template>
@@ -34,6 +34,30 @@ module(
       assert.deepEqual(data.foo, 1);
     });
 
+    test("supports small decimal values", async function (assert) {
+      let data = { foo: "" };
+      const mutateData = (x) => (data = x);
+
+      await render(
+        <template>
+          <Form @onSubmit={{mutateData}} @data={{data}} as |form|>
+            <form.Field @name="foo" @title="Foo" as |field|>
+
+              <field.Input @type="number" />
+            </form.Field>
+          </Form>
+        </template>
+      );
+
+      await fillIn("input", "0.00123");
+
+      assert.form().field("foo").hasValue("0.00123");
+
+      await formKit().submit();
+
+      assert.strictEqual(data.foo, 0.00123);
+    });
+
     test("validation of required", async function (assert) {
       await render(
         <template>