Skip to content

Commit 1832e69

Browse files
committed
fix(form): More fixes for number inputs being considered valued
1 parent f3877a3 commit 1832e69

File tree

2 files changed

+30
-1
lines changed

2 files changed

+30
-1
lines changed

packages/form/src/text-field/__tests__/TextField.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,32 @@ describe("TextField", () => {
158158
expect(label.className).toContain("rmd-floating-label--inactive");
159159
});
160160

161+
it("should add the inactive floating label state on blur if the change event never really got fired", () => {
162+
function Test(): ReactElement {
163+
return <TextField id="text-field" label="Label" type="number" />;
164+
}
165+
const { getByRole, getByText } = render(<Test />);
166+
167+
const field = getByRole("spinbutton") as HTMLInputElement;
168+
const label = getByText("Label");
169+
expect(field.value).toBe("");
170+
expect(label.className).not.toContain("rmd-floating-label--active");
171+
expect(label.className).not.toContain("rmd-floating-label--inactive");
172+
173+
fireEvent.change(field, { target: { value: "-" } });
174+
expect(label.className).not.toContain("rmd-floating-label--active");
175+
expect(label.className).not.toContain("rmd-floating-label--inactive");
176+
177+
// TODO: Look into writing real browser tests since this isn't implemented in JSDOM
178+
Object.defineProperty(field.validity, "badInput", {
179+
writable: true,
180+
value: true,
181+
});
182+
fireEvent.blur(field);
183+
expect(label.className).toContain("rmd-floating-label--active");
184+
expect(label.className).toContain("rmd-floating-label--inactive");
185+
});
186+
161187
it("should not add the inactive floating label state when a non-number type has a badInput validity", () => {
162188
const { getByRole, getByText } = render(
163189
<TextField id="text-field" label="Label" type="url" defaultValue="" />

packages/form/src/text-field/useValuedState.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export function useValuedState<T extends TextElement>({
3636
return value.length > 0;
3737
}
3838

39+
/* istanbul ignore next */
3940
return typeof value === "number";
4041
});
4142

@@ -49,6 +50,7 @@ export function useValuedState<T extends TextElement>({
4950
const input = event.currentTarget;
5051
if (input.getAttribute("type") === "number") {
5152
input.checkValidity();
53+
/* istanbul ignore next */
5254
if (input.validity.badInput) {
5355
return;
5456
}
@@ -78,13 +80,14 @@ export function useValuedState<T extends TextElement>({
7880
if (input.getAttribute("type") === "number") {
7981
input.checkValidity();
8082
if (input.validity.badInput || input.value.length > 0) {
83+
enable();
8184
return;
8285
}
8386

8487
disable();
8588
}
8689
},
87-
[onBlur, disable]
90+
[onBlur, enable, disable]
8891
);
8992

9093
return [valued, handleChange, handleBlur];

0 commit comments

Comments
 (0)