FIX: FormKit: Allow 0 in required number input (#28368)

0 is falsy in JavaScript, so the original code would treat 0 as if it
were not input. This unique exception was added to prevent 0 from being
treated as empty input.

app/assets/javascripts/discourse/app/form-kit/lib/validator.js

@@ -104,7 +104,7 @@ export default class Validator {
         }
         break;
       case "input-number":
-        if (!value || typeof value === "undefined" || isNaN(Number(value))) {
+        if ((!value && value !== 0) || isNaN(Number(value))) {
           error = true;
         }
         break;

app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-number-test.gjs

@@ -1,38 +1,15 @@
-import { render } from "@ember/test-helpers";
+import { fillIn, render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import Form from "discourse/components/form";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import formKit from "discourse/tests/helpers/form-kit-helper";
 
 module(
-  "Integration | Component | FormKit | Controls | Input",
+  "Integration | Component | FormKit | Controls | Input | Number",
   function (hooks) {
     setupRenderingTest(hooks);
 
-    test("default", async function (assert) {
+    test("@type=number", 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 />
-          </form.Field>
-        </Form>
-      </template>);
-
-      assert.form().field("foo").hasValue("");
-
-      await formKit().field("foo").fillIn("bar");
-
-      assert.form().field("foo").hasValue("bar");
-
-      await formKit().submit();
-
-      assert.deepEqual(data.foo, "bar");
-    });
-
-    test("@type", async function (assert) {
       let data = { foo: "" };
       const mutateData = (x) => (data = x);
 
@@ -54,5 +31,29 @@ module(
 
       assert.deepEqual(data.foo, 1);
     });
+
+    test("validation of required", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field
+            @name="foo"
+            @title="Foo"
+            @validation="required"
+            as |field|
+          >
+            <field.Input @type="number" />
+          </form.Field>
+        </Form>
+      </template>);
+
+      await formKit().submit();
+
+      assert.form().hasErrors({ foo: ["Required"] });
+      assert.form().field("foo").hasError("Required");
+
+      await fillIn("input", "0");
+      await formKit().submit();
+      assert.form().field("foo").hasNoError();
+    });
   }
 );

app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/input-text-test.gjs

@@ -0,0 +1,35 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import Form from "discourse/components/form";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import formKit from "discourse/tests/helpers/form-kit-helper";
+
+module(
+  "Integration | Component | FormKit | Controls | Input | Text",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("default", 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 />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.form().field("foo").hasValue("");
+
+      await formKit().field("foo").fillIn("bar");
+
+      assert.form().field("foo").hasValue("bar");
+
+      await formKit().submit();
+
+      assert.deepEqual(data.foo, "bar");
+    });
+  }
+);