Capture the current Keyword in the input in state

Keeps a parent State that tracks if a pending Keyword is in the input
field up-to-date

libs/ui/src/components/badge-input.tsx

@@ -1,14 +1,15 @@
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { Dispatch, forwardRef, SetStateAction, useCallback, useEffect, useState } from "react";
 
 import { Input, InputProps } from "./input";
 
 type BadgeInputProps = Omit<InputProps, "value" | "onChange"> & {
   value: string[];
   onChange: (value: string[]) => void;
+  setPendingKeyword?: Dispatch<SetStateAction<string>>;
 };
 
 export const BadgeInput = forwardRef<HTMLInputElement, BadgeInputProps>(
-  ({ value, onChange, ...props }, ref) => {
+  ({ value, onChange, setPendingKeyword, ...props }, ref) => {
     const [label, setLabel] = useState("");
 
     const processInput = useCallback(() => {
@@ -27,6 +28,10 @@ export const BadgeInput = forwardRef<HTMLInputElement, BadgeInputProps>(
       }
     }, [label, processInput]);
 
+    useEffect(() => {
+      if (setPendingKeyword) setPendingKeyword(label);
+    }, [label, setPendingKeyword]);
+
     const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key === "Enter") {
         event.preventDefault();