diff --git a/.changeset/spicy-bees-boil.md b/.changeset/spicy-bees-boil.md new file mode 100644 index 0000000000..b7dda3911f --- /dev/null +++ b/.changeset/spicy-bees-boil.md @@ -0,0 +1,5 @@ +--- +"@medusajs/ui": patch +--- + +fix(ui): Prevent Command from triggering while a editable field has focus" diff --git a/packages/design-system/ui/src/components/command-bar/command-bar.tsx b/packages/design-system/ui/src/components/command-bar/command-bar.tsx index 34adfcbbb3..6efcd2b09a 100644 --- a/packages/design-system/ui/src/components/command-bar/command-bar.tsx +++ b/packages/design-system/ui/src/components/command-bar/command-bar.tsx @@ -5,6 +5,7 @@ import * as React from "react" import { Kbd } from "@/components/kbd" import { clx } from "@/utils/clx" +import { isInputElement } from "@/utils/is-input-element" interface CommandBarProps extends React.PropsWithChildren { open?: boolean @@ -166,6 +167,10 @@ const Command = React.forwardRef( ) => { React.useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { + if (isInputElement(document.activeElement)) { + return + } + if (event.key.toLowerCase() === shortcut.toLowerCase()) { event.preventDefault() event.stopPropagation() diff --git a/packages/design-system/ui/src/utils/is-input-element.ts b/packages/design-system/ui/src/utils/is-input-element.ts new file mode 100644 index 0000000000..cce8047c1b --- /dev/null +++ b/packages/design-system/ui/src/utils/is-input-element.ts @@ -0,0 +1,11 @@ +const isInputElement = (element: Element | null): boolean => { + return ( + element instanceof HTMLElement && + (element.isContentEditable || + element.tagName === "INPUT" || + element.tagName === "TEXTAREA" || + element.tagName === "SELECT") + ) +} + +export { isInputElement }