feat: allow subscribing for the InputEvent in the TextField compo…

…nent
aradzie · Nov 11, 2024 · f7d7438 · f7d7438
1 parent 9480fbb
commit f7d7438
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/keybr-widget/lib/components/textfield/TextField.tsx b/packages/keybr-widget/lib/components/textfield/TextField.tsx
@@ -23,6 +23,7 @@ export const TextField = forwardRef(function TextField(
     type = "text",
     value,
     onChange,
+    onInput,
     ...props
   }: TextFieldProps,
   ref: ForwardedRef<TextFieldRef>,
@@ -59,11 +60,15 @@ export const TextField = forwardRef(function TextField(
         onChange={(event) => {
           onChange?.((event.target as HTMLTextAreaElement).value);
         }}
+        onInput={({ nativeEvent }) => {
+          onInput?.(nativeEvent as InputEvent);
+        }}
       />
     );
   } else {
     return (
       <input
+        {...props}
         ref={element as RefObject<HTMLInputElement>}
         className={clsx(
           styles.root,
@@ -81,7 +86,9 @@ export const TextField = forwardRef(function TextField(
         onChange={(event) => {
           onChange?.((event.target as HTMLInputElement).value);
         }}
-        {...props}
+        onInput={({ nativeEvent }) => {
+          onInput?.(nativeEvent as InputEvent);
+        }}
       />
     );
   }

diff --git a/packages/keybr-widget/lib/components/textfield/TextField.types.ts b/packages/keybr-widget/lib/components/textfield/TextField.types.ts
@@ -18,6 +18,7 @@ export type TextFieldProps = {
   readonly type?: TextFieldType;
   readonly value?: string;
   readonly onChange?: (value: string) => void;
+  readonly onInput?: (event: InputEvent) => void;
 } & FocusProps &
   MouseProps &
   KeyboardProps;