diff --git a/src/components/Editor/Context/Tags/TagEditor.tsx b/src/components/Editor/Context/Tags/TagEditor.tsx index 1062ad708..81f661ec3 100644 --- a/src/components/Editor/Context/Tags/TagEditor.tsx +++ b/src/components/Editor/Context/Tags/TagEditor.tsx @@ -32,13 +32,8 @@ export const TagEditor = ({ value={value} onChange={handleChange} onBlur={onSave} - onKeyDown={(e) => { - if (e.key === "Enter") { - onSave(); - } else if (e.key === "Escape") { - onCancel(); - } - }} + onEnter={onSave} + onEscape={onCancel} placeholder="Enter tag name..." className="h-7 text-xs w-36" /> diff --git a/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx b/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx index 90e5c6c38..f1d5bbc79 100644 --- a/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx +++ b/src/components/shared/AnnotationFilterInput/AnnotationFilterInput.tsx @@ -1,4 +1,3 @@ -import type { KeyboardEvent } from "react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; @@ -48,16 +47,10 @@ export function AnnotationFilterInput({ onChange(newFilters); }; - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Enter" && keyInput.trim()) { - e.preventDefault(); - handleAdd(); - } - if (e.key === "Escape") { - setIsExpanded(false); - setKeyInput(""); - setValueInput(""); - } + const handleCancel = () => { + setIsExpanded(false); + setKeyInput(""); + setValueInput(""); }; return ( @@ -77,7 +70,8 @@ export function AnnotationFilterInput({ placeholder="Key" value={keyInput} onChange={(e) => setKeyInput(e.target.value)} - onKeyDown={handleKeyDown} + onEnter={handleAdd} + onEscape={handleCancel} className="w-28 h-8 text-sm" autoFocus /> @@ -85,7 +79,8 @@ export function AnnotationFilterInput({ placeholder="Value (optional)" value={valueInput} onChange={(e) => setValueInput(e.target.value)} - onKeyDown={handleKeyDown} + onEnter={handleAdd} + onEscape={handleCancel} className="w-36 h-8 text-sm" />