add onkeydown event (#138)

Co-authored-by: Timothy Trowbridge <92933708+neotrow@users.noreply.github.com>

Author: neotob

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- property `onKeyDown` to `Input` component
+
 ## [3.7.1] - 2025-07-17
 
 ### Fixed

cypress/cypress/component/Input/BasicInputField.cy.tsx

@@ -249,6 +249,31 @@ describe("Input.cy.tsx", () => {
     cy.get("@onBlurSpy").should("be.calledWithMatch", { target: { value: randomWord } });
   });
 
+  it("on key down handler gets called", () => {
+    const name = faker.random.alpha(10);
+    const schema = yup.object().shape({
+      [name]: yup.string(),
+    });
+
+    const randomWord = faker.random.word();
+
+    cy.mount(
+      <Form onSubmit={cy.spy().as("onSubmitSpy")} resolver={yupResolver(schema)}>
+        {/* <Input name={name} label={name} onKeyDown={(e) => console.log("key down", e)} /> */}
+        <Input name={name} label={name} onKeyDown={cy.spy().as("onKeyDownSpy")} />
+
+        <input type={"submit"} />
+      </Form>,
+    );
+
+    cy.contains("label", name).click();
+    cy.focused().type(randomWord.toString());
+    for (const char of randomWord) {
+      cy.get("@onKeyDownSpy").should("be.calledWithMatch", { key: char });
+    }
+    cy.get("@onKeyDownSpy").should("have.callCount", randomWord.length);
+  });
+
   it("text area works", () => {
     const name = faker.random.alpha(10);
     const textAreaRows = faker.datatype.number({ min: 6, max: 10 });

src/lib/components/Input/InputInternal.tsx

@@ -14,6 +14,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
     type,
     onBlur,
     onChange,
+    onKeyDown,
     value,
     options,
     multiple,
@@ -93,6 +94,7 @@ const InputInternal = <T extends FieldValues>(props: InputProps<T>) => {
             await rest.onChange(e);
           })();
         }}
+        onKeyDown={onKeyDown}
         onFocus={focusHandler}
         className={className}
       >

src/lib/types/CommonInputProps.ts

@@ -86,6 +86,13 @@ interface CommonInputProps<T extends FieldValues, TRenderAddon = unknown> {
    * @example <Input<T> type="text" maxlength={10} />
    */
   maxLength?: number;
+
+  /**
+   * Component prop that represents the onKeyDown event handler for the input element
+   * @type {(e: React.KeyboardEvent<HTMLInputElement>) => void}
+   * @example <Input<T> type="text" onKeyDown={(e) => console.log(e.key)} />
+   */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export { CommonInputProps };