feat: allow subscribing for the InputEvent in the TextField component

Author: aradzie

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);
+        }}
       />
     );
   }

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;