Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(form): better blur error cases for useNumberField
  • Loading branch information
mlaursen committed Nov 24, 2020
1 parent 8fa3f58 commit 8b927ab
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 4 deletions.
31 changes: 31 additions & 0 deletions packages/form/src/text-field/__tests__/useNumberField.tsx
Expand Up @@ -162,6 +162,37 @@ describe("useNumberField", () => {
fireEvent.blur(field);
expect(field.value).toBe("100");
});

it("should set the value to the min or defaultValue on blur if there is no value in the text field", () => {
const { getByRole, rerender } = render(<NumberField defaultValue={1} />);
const field = getByRole("spinbutton") as HTMLInputElement;
expect(field.value).toBe("1");

fireEvent.focus(field);
fireEvent.blur(field);
expect(field.value).toBe("1");

userEvent.type(field, "00");
expect(field.value).toBe("100");

userEvent.clear(field);
fireEvent.blur(field);
expect(field.value).toBe("1");

rerender(<NumberField min={0} defaultValue={1} />);
expect(field.value).toBe("1");

fireEvent.focus(field);
fireEvent.blur(field);
expect(field.value).toBe("1");

userEvent.type(field, "00");
expect(field.value).toBe("100");

userEvent.clear(field);
fireEvent.blur(field);
expect(field.value).toBe("0");
});
});

describe("number change behavior", () => {
Expand Down
15 changes: 11 additions & 4 deletions packages/form/src/text-field/useNumberField.ts
Expand Up @@ -262,11 +262,18 @@ export function useNumberField({
return;
}

let value = input.valueAsNumber;
if (input.value === "" && typeof initial.current === "number") {
value = min ?? initial.current;
}

// can't have both rangeUnderflow and rangeOverflow at the same time, so
// it's "safe" to alwaays provide both
const value = withinRange(input.valueAsNumber, min, max);
setNumber(value);
input.value = `${value}`;
// it's "safe" to always provide both
value = withinRange(value, min, max);
if (!Number.isNaN(value)) {
setNumber(value);
input.value = `${value}`;
}
},
[onBlur, fixOnBlur, min, max]
);
Expand Down

0 comments on commit 8b927ab

Please sign in to comment.