fix(input, input-number): allows numeric characters. (#7213)

**Related Issue:** #6854 ## Summary This PR will support French AZERTY keyboard layout in `calcite-input` & `calcite-input-number`
Esri · Jun 26, 2023 · 739f0af · 739f0af
1 parent 11d93b2
commit 739f0af
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 20 deletions.
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
@@ -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`<calcite-input-number></calcite-input-number>`);
     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`<calcite-input type="number"></calcite-input>`);
+    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
@@ -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
@@ -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`<calcite-input type="number"></calcite-input>`);
       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`<calcite-input type="number"></calcite-input>`);
+      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
@@ -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();
       }