diff --git a/package/lib/hook/usePasscode.test.tsx b/package/lib/hook/usePasscode.test.tsx
index 7bafe19..c9bee8c 100644
--- a/package/lib/hook/usePasscode.test.tsx
+++ b/package/lib/hook/usePasscode.test.tsx
@@ -48,25 +48,75 @@ describe("test basic workflow", () => {
await waitFor(() => {
expect(secondtInput).toHaveFocus();
});
+
+ // Verify that the value of first input is 1
+ expect(firstInput).toHaveValue("1");
});
- it("3. test if the focus changes to previous element when backspaced", async () => {
+
+ it("3. test if the focus changes to next element when the zero digit is typed", async () => {
render();
// focus on the first input
const firstInput: HTMLInputElement = screen.getByTestId("index-0");
firstInput.focus();
+ expect(firstInput).toHaveFocus();
//Type in first input and check the focus of next input
- userEvent.type(firstInput, "1");
+ userEvent.type(firstInput, "0");
const secondtInput: HTMLInputElement = screen.getByTestId("index-1");
await waitFor(() => {
expect(secondtInput).toHaveFocus();
});
+ // Verify that the value of first input is 0
+ expect(firstInput).toHaveValue("0");
+ });
+
+
+ it("4. test if the focus changes to previous element when backspaced", async () => {
+ render();
+ // focus on the first input
+ const firstInput: HTMLInputElement = screen.getByTestId("index-0");
+ firstInput.focus();
+
+ //Type in first input and check the focus of next input
+ userEvent.type(firstInput, "1");
+ const secondInput: HTMLInputElement = screen.getByTestId("index-1");
+ await waitFor(() => {
+ expect(secondInput).toHaveFocus();
+ });
+
+ //Backspace and observe focus shift
+ userEvent.keyboard("{Backspace}");
+ await waitFor(() => {
+ expect(firstInput).toHaveFocus();
+ });
+
+ // Verify that the value of second input is empty
+ expect(secondInput).toHaveValue("");
+ });
+
+
+ it("5. test if the focus changes to previous element when backspaced over the zero digit", async () => {
+ render();
+ // focus on the first input
+ const firstInput: HTMLInputElement = screen.getByTestId("index-0");
+ firstInput.focus();
+
+ //Type in first input and check the focus of next input
+ userEvent.type(firstInput, "0");
+ const secondInput: HTMLInputElement = screen.getByTestId("index-1");
+ await waitFor(() => {
+ expect(secondInput).toHaveFocus();
+ });
+
//Backspace and observe focus shift
userEvent.keyboard("{Backspace}");
await waitFor(() => {
expect(firstInput).toHaveFocus();
});
+
+ // Verify that the value of second input is empty
+ expect(secondInput).toHaveValue("");
});
});
diff --git a/package/lib/hook/usePasscode.ts b/package/lib/hook/usePasscode.ts
index 869982c..b897ee6 100644
--- a/package/lib/hook/usePasscode.ts
+++ b/package/lib/hook/usePasscode.ts
@@ -10,6 +10,7 @@ import {
getClipboardContent,
getClipboardReadPermission,
getFilledArray,
+ isNumeric,
shouldPreventDefault,
} from "../utils";
@@ -75,7 +76,7 @@ const usePasscode = (props: PasscodeProps) => {
if (
(isAlphaNumeric
? ALPHANUMERIC_REGEX.test(e.key)
- : parseInt(e.key)) &&
+ : isNumeric(e.key)) &&
index <= passcode.length - 2
) {
setCurrentFocusedIndex(index + 1);
diff --git a/package/lib/utils/index.ts b/package/lib/utils/index.ts
index 17c5698..9b12a2a 100644
--- a/package/lib/utils/index.ts
+++ b/package/lib/utils/index.ts
@@ -1,14 +1,17 @@
export const ALPHANUMERIC_REGEX = /^[a-z0-9]$/i;
+
+export const isNumeric = (key: string) => !isNaN(Number(key))
+
export const shouldPreventDefault = (
key: string,
isAlphaNumeric: boolean = false,
isMeta: boolean = false
) => {
- const parsed = Number(key);
-
+ // Check if the key is a number
+ const isKeyNumeric = isNumeric(key);
// By default we only allow numbers to be pressed = DONE
- if (parsed) return false;
+ if (isKeyNumeric) return false;
// Crtl + V
if (isMeta && key === "v") return false;
@@ -17,7 +20,7 @@ export const shouldPreventDefault = (
if (key === "Backspace") return false;
// We only allow alphabets to be pressed when the isAplhaNumeric flag is true = DONE
- if (isAlphaNumeric && isNaN(parsed)) {
+ if (isAlphaNumeric && !isKeyNumeric) {
return false;
}
diff --git a/package/lib/utils/utils.test.ts b/package/lib/utils/utils.test.ts
index acc589f..edf8563 100644
--- a/package/lib/utils/utils.test.ts
+++ b/package/lib/utils/utils.test.ts
@@ -5,6 +5,9 @@ describe("test shouldPreventDefault", () => {
let key = "1";
expect(shouldPreventDefault(key)).toBeFalsy();
+ key = "0";
+ expect(shouldPreventDefault(key)).toBeFalsy();
+
key = "v";
expect(shouldPreventDefault(key, false, true)).toBeFalsy();