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();
}