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 8a39db66f00..b098fb6b80b 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 @@ -899,20 +899,12 @@ describe("calcite-input-number", () => { expect(Number(await element.getProperty("value"))).toBe(195); }); - it("disallows typing number with shift modifier key down", async () => { + it("disallows typing non-numeric characters with shift modifier key down", async () => { const page = await newE2EPage(); await page.setContent(html``); const calciteInput = await page.find("calcite-input-number"); const input = await page.find("calcite-input-number >>> input"); await calciteInput.callMethod("setFocus"); - - for (let i = 0; i < numberKeys.length; i++) { - await page.keyboard.down("Shift"); - await page.keyboard.press(numberKeys[i] as KeyInput); - await page.keyboard.up("Shift"); - expect(await calciteInput.getProperty("value")).toBeFalsy(); - expect(await input.getProperty("value")).toBeFalsy(); - } const nonELetterKeys = letterKeys.filter((key) => key !== "e"); for (let i = 0; i < nonELetterKeys.length; i++) { await page.keyboard.down("Shift"); @@ -923,6 +915,25 @@ describe("calcite-input-number", () => { } }); + it("allows typing numeric characters with shift modifier key down (#6854)", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const calciteInput = await page.find("calcite-input"); + const input = await page.find("calcite-input >>> input"); + await calciteInput.callMethod("setFocus"); + const numberKeysExcludingZero = numberKeys.slice(1); + + let result = ""; + for (let i = 0; i < numberKeysExcludingZero.length; i++) { + await page.keyboard.down("Shift"); + await page.keyboard.press(numberKeysExcludingZero[i] as KeyInput); + result += numberKeysExcludingZero[i]; + await page.keyboard.up("Shift"); + expect(await calciteInput.getProperty("value")).toBe(result); + expect(await input.getProperty("value")).toBe(result); + } + }); + it("allows shift tabbing", async () => { const page = await newE2EPage(); await page.setContent(html` 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 8bef5603a7e..9893db14c39 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -668,7 +668,7 @@ export class InputNumber return; } const isShiftTabEvent = event.shiftKey && event.key === "Tab"; - if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) { + if (supportedKeys.includes(event.key) || isShiftTabEvent) { if (event.key === "Enter") { this.emitChangeIfUserModified(); } diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts index b7a67aaa485..b87f8c4e805 100644 --- a/packages/calcite-components/src/components/input/input.e2e.ts +++ b/packages/calcite-components/src/components/input/input.e2e.ts @@ -1055,20 +1055,12 @@ describe("calcite-input", () => { expect(Number(await element.getProperty("value"))).toBe(195); }); - it("disallows typing any letter or number with shift modifier key down", async () => { + it("disallows typing any non-numeric characters with shift modifier key down", async () => { const page = await newE2EPage(); await page.setContent(html``); const calciteInput = await page.find("calcite-input"); const input = await page.find("calcite-input >>> input"); await calciteInput.callMethod("setFocus"); - - for (let i = 0; i < numberKeys.length; i++) { - await page.keyboard.down("Shift"); - await page.keyboard.press(numberKeys[i] as KeyInput); - await page.keyboard.up("Shift"); - expect(await calciteInput.getProperty("value")).toBeFalsy(); - expect(await input.getProperty("value")).toBeFalsy(); - } const nonELetterKeys = letterKeys.filter((key) => key !== "e"); for (let i = 0; i < nonELetterKeys.length; i++) { await page.keyboard.down("Shift"); @@ -1079,6 +1071,25 @@ describe("calcite-input", () => { } }); + it("allows typing numeric characters with shift modifier key down (#6854)", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const calciteInput = await page.find("calcite-input"); + const input = await page.find("calcite-input >>> input"); + await calciteInput.callMethod("setFocus"); + const numberKeysExcludingZero = numberKeys.slice(1); + + let result = ""; + for (let i = 0; i < numberKeysExcludingZero.length; i++) { + await page.keyboard.down("Shift"); + await page.keyboard.press(numberKeysExcludingZero[i] as KeyInput); + result += numberKeysExcludingZero[i]; + await page.keyboard.up("Shift"); + expect(await calciteInput.getProperty("value")).toBe(result); + expect(await input.getProperty("value")).toBe(result); + } + }); + it("allows shift tabbing", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 97b4580f616..c89165e1c19 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -784,7 +784,7 @@ export class Input return; } const isShiftTabEvent = event.shiftKey && event.key === "Tab"; - if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) { + if (supportedKeys.includes(event.key) || isShiftTabEvent) { if (event.key === "Enter") { this.emitChangeIfUserModified(); }