diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index b2b6d653375..5de72a613aa 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts @@ -1818,4 +1818,34 @@ describe("calcite-input-number", () => { expect(await input.getProperty("value")).toBe(`${totalNudgesUp}`); expect(calciteInputNumberInput).toHaveReceivedEventTimes(totalNudgesUp); }); + + it("should have decimal as initial inputmode", async () => { + const page = await newE2EPage(); + await page.setContent(``); + const inputNumber = await page.find("calcite-input-number"); + const internalInput = await page.find("calcite-input-number >>> input"); + + // we assert on the attribute as this is what browsers will look for to display the correct keyboard + expect(internalInput.getAttribute("inputmode")).toBe("decimal"); + + inputNumber.setProperty("inputMode", "text"); + await page.waitForChanges(); + + expect(internalInput.getAttribute("inputmode")).toBe("text"); + + inputNumber.setProperty("inputMode", ""); + await page.waitForChanges(); + + expect(internalInput.getAttribute("inputmode")).toBe("decimal"); + + inputNumber.setAttribute("inputmode", "none"); + await page.waitForChanges(); + + expect(internalInput.getAttribute("inputmode")).toBe("none"); + + inputNumber.setAttribute("inputmode", ""); + await page.waitForChanges(); + + expect(internalInput.getAttribute("inputmode")).toBe("decimal"); + }); }); diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 37a953b7cf7..b3a85cf96ba 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -1087,7 +1087,7 @@ export class InputNumber defaultValue={this.defaultValue} disabled={this.disabled ? true : null} enterKeyHint={this.el.enterKeyHint || this.el.getAttribute("enterkeyhint")} - inputMode={this.el.inputMode || this.el.getAttribute("inputmode")} + inputMode={this.el.inputMode || this.el.getAttribute("inputmode") || "decimal"} key="localized-input" maxLength={this.maxLength} minLength={this.minLength}