From b26799134e9e4e029b5476a32ada77572e4c0a9c Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Tue, 25 Jun 2024 17:12:03 -0700 Subject: [PATCH] fix: escape key interop with other radix utilities (#309) --- packages/react/package.json | 1 + .../src/primitives/composer/ComposerInput.tsx | 15 +++++++++------ pnpm-lock.yaml | 3 +++ 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index c0292fdd3..4f2b86af3 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -71,6 +71,7 @@ "@radix-ui/react-primitive": "^2.0.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-use-callback-ref": "^1.1.0", + "@radix-ui/react-use-escape-keydown": "^1.1.0", "nanoid": "^5.0.7", "react-textarea-autosize": "^8.5.3", "zod": "^3.23.8", diff --git a/packages/react/src/primitives/composer/ComposerInput.tsx b/packages/react/src/primitives/composer/ComposerInput.tsx index 909c6b55d..a90c97459 100644 --- a/packages/react/src/primitives/composer/ComposerInput.tsx +++ b/packages/react/src/primitives/composer/ComposerInput.tsx @@ -16,6 +16,7 @@ import TextareaAutosize, { import { useComposerContext } from "../../context/react/ComposerContext"; import { useThreadContext } from "../../context/react/ThreadContext"; import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom"; +import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown"; type ComposerInputProps = TextareaAutosizeProps & { asChild?: boolean; @@ -42,15 +43,17 @@ export const ComposerInput = forwardRef< const textareaRef = useRef(null); const ref = useComposedRefs(forwardedRef, textareaRef); + useEscapeKeydown((e) => { + const composer = useComposer.getState(); + if (composer.cancel()) { + e.preventDefault(); + } + }); + const handleKeyPress = (e: KeyboardEvent) => { if (disabled) return; - if (e.key === "Escape") { - const composer = useComposer.getState(); - if (composer.cancel()) { - e.preventDefault(); - } - } else if (e.key === "Enter" && e.shiftKey === false) { + if (e.key === "Enter" && e.shiftKey === false) { const isRunning = useThread.getState().isRunning; if (!isRunning) { e.preventDefault(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 650ca905c..84b4a3b1c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -496,6 +496,9 @@ importers: '@radix-ui/react-use-callback-ref': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) + '@radix-ui/react-use-escape-keydown': + specifier: ^1.1.0 + version: 1.1.0(@types/react@18.3.3)(react@18.3.1) '@types/react': specifier: '*' version: 18.3.3