Allow onChange callback to be used with internal state

The state is managed by the component but value changes can still be observed.

Author: andreaswilli

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "build": "webpack",
     "build:prod": "webpack --mode=production",
-    "serve": "webpack --watch",
+    "serve": "webpack --watch --mode=production",
     "lint": "eslint src",
     "test": "jest --coverage",
     "bump-major": "npm version major",

src/index.js

@@ -60,9 +60,8 @@ const VerificationInput = forwardRef(
       if (RegExp(`^[${validChars}]{0,${length}}$`).test(newInputVal)) {
         if (onChange) {
           onChange?.(newInputVal);
-        } else {
-          setLocalValue(newInputVal);
         }
+        setLocalValue(newInputVal);
       }
     };
 

src/verification-input.test.js

@@ -251,6 +251,18 @@ describe("VerificationInput", () => {
     expect(spyHandleChange).toHaveBeenCalledWith("01");
   });
 
+  it("should trigger onChange callback even if value is not provided", () => {
+    const spyHandleChange = jest.fn();
+
+    render(<VerificationInput onChange={spyHandleChange} />);
+
+    userEvent.type(screen.getByRole("textbox"), "01");
+
+    expect(spyHandleChange).toHaveBeenCalledTimes(2);
+    expect(spyHandleChange).toHaveBeenCalledWith("0");
+    expect(spyHandleChange).toHaveBeenCalledWith("01");
+  });
+
   it("should trigger onFocus and onBlur callbacks", () => {
     const spyHandleFocus = jest.fn();
     const spyHandleBlur = jest.fn();