diff --git a/packages/lib/src/number-input/NumberInput.test.tsx b/packages/lib/src/number-input/NumberInput.test.tsx index f0f3a37f7..d37498765 100644 --- a/packages/lib/src/number-input/NumberInput.test.tsx +++ b/packages/lib/src/number-input/NumberInput.test.tsx @@ -586,4 +586,15 @@ describe("Number input component tests", () => { } expect(handlerOnSubmit).toHaveBeenCalled(); }); + test("Number input keeps type number while typing so typed digits keep their order", async () => { + const user = userEvent.setup(); + const { getByLabelText } = render(); + const number = getByLabelText("Number label") as HTMLInputElement; + await user.click(number); + await user.keyboard("1"); + expect(number.getAttribute("type")).toBe("number"); + await user.keyboard("5"); + expect(number.getAttribute("type")).toBe("number"); + expect(number.value).toBe("15"); + }); }); diff --git a/packages/lib/src/text-input/TextInput.tsx b/packages/lib/src/text-input/TextInput.tsx index 34d3a6c9f..5c76f3cc7 100644 --- a/packages/lib/src/text-input/TextInput.tsx +++ b/packages/lib/src/text-input/TextInput.tsx @@ -477,7 +477,6 @@ const DxcTextInput = ({ } if (numberInputContext != null) { setNumberProps( - numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber, @@ -548,7 +547,7 @@ const DxcTextInput = ({ maxLength={maxLength} minLength={minLength} tabIndex={tabIndex} - type="text" + type={numberInputContext?.typeNumber ?? "text"} value={value ?? innerValue} /> diff --git a/packages/lib/src/text-input/utils.ts b/packages/lib/src/text-input/utils.ts index 0d6faffe5..587ad1795 100644 --- a/packages/lib/src/text-input/utils.ts +++ b/packages/lib/src/text-input/utils.ts @@ -151,9 +151,8 @@ export const incrementNumber = ( } }; -export const setNumberProps = (type?: string, min?: number, max?: number, step?: number, ref?: HTMLInputElement) => { +export const setNumberProps = (min?: number, max?: number, step?: number, ref?: HTMLInputElement) => { if (min != null) ref?.setAttribute("min", min.toString()); if (max != null) ref?.setAttribute("max", max.toString()); if (step != null) ref?.setAttribute("step", step.toString()); - if (type != null) ref?.setAttribute("type", type); };