fix(ui): Prevent Command from triggering while a editable field has focus (medusajs#11254)

Resolves CMRC-909

Author: kasperkristensen

.changeset/spicy-bees-boil.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(ui): Prevent Command from triggering while a editable field has focus"

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<HTMLButtonElement, CommandProps>(
   ) => {
     React.useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
+        if (isInputElement(document.activeElement)) {
+          return
+        }
+
         if (event.key.toLowerCase() === shortcut.toLowerCase()) {
           event.preventDefault()
           event.stopPropagation()

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 }