Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 16:22:59 +10:00
Code Issues Packages Projects Releases Wiki Activity

Capture the current Keyword in the input in state

Browse Source 
Keeps a parent State that tracks if a pending Keyword is in the input
field up-to-date
This commit is contained in:
CorreyL
2024-01-18 19:39:53 -08:00
parent 469f1d5cdd
commit da23b06f71
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
libs/ui/src/components/badge-input.tsx
View File

@ -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();