fix(form): More fixes for number inputs being considered valued

mlaursen · Nov 24, 2020 · 1832e69 · 1832e69
1 parent f3877a3
commit 1832e69
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/form/src/text-field/__tests__/TextField.tsx b/packages/form/src/text-field/__tests__/TextField.tsx
@@ -158,6 +158,32 @@ describe("TextField", () => {
     expect(label.className).toContain("rmd-floating-label--inactive");
   });
 
+  it("should add the inactive floating label state on blur if the change event never really got fired", () => {
+    function Test(): ReactElement {
+      return <TextField id="text-field" label="Label" type="number" />;
+    }
+    const { getByRole, getByText } = render(<Test />);
+
+    const field = getByRole("spinbutton") as HTMLInputElement;
+    const label = getByText("Label");
+    expect(field.value).toBe("");
+    expect(label.className).not.toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+
+    fireEvent.change(field, { target: { value: "-" } });
+    expect(label.className).not.toContain("rmd-floating-label--active");
+    expect(label.className).not.toContain("rmd-floating-label--inactive");
+
+    // TODO: Look into writing real browser tests since this isn't implemented in JSDOM
+    Object.defineProperty(field.validity, "badInput", {
+      writable: true,
+      value: true,
+    });
+    fireEvent.blur(field);
+    expect(label.className).toContain("rmd-floating-label--active");
+    expect(label.className).toContain("rmd-floating-label--inactive");
+  });
+
   it("should not add the inactive floating label state when a non-number type has a badInput validity", () => {
     const { getByRole, getByText } = render(
       <TextField id="text-field" label="Label" type="url" defaultValue="" />

diff --git a/packages/form/src/text-field/useValuedState.ts b/packages/form/src/text-field/useValuedState.ts
@@ -36,6 +36,7 @@ export function useValuedState<T extends TextElement>({
       return value.length > 0;
     }
 
+    /* istanbul ignore next */
     return typeof value === "number";
   });
 
@@ -49,6 +50,7 @@ export function useValuedState<T extends TextElement>({
       const input = event.currentTarget;
       if (input.getAttribute("type") === "number") {
         input.checkValidity();
+        /* istanbul ignore next */
         if (input.validity.badInput) {
           return;
         }
@@ -78,13 +80,14 @@ export function useValuedState<T extends TextElement>({
       if (input.getAttribute("type") === "number") {
         input.checkValidity();
         if (input.validity.badInput || input.value.length > 0) {
+          enable();
           return;
         }
 
         disable();
       }
     },
-    [onBlur, disable]
+    [onBlur, enable, disable]
   );
 
   return [valued, handleChange, handleBlur];