From 3cf430729698c5f62fb6e6d0ebf06ea930981653 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Tue, 4 Feb 2025 11:09:07 +0100
Subject: [PATCH] fix(ui): Prevent Command from triggering while a editable
 field has focus (#11254)

Resolves CMRC-909
---
 .changeset/spicy-bees-boil.md                         |  5 +++++
 .../ui/src/components/command-bar/command-bar.tsx     |  5 +++++
 .../design-system/ui/src/utils/is-input-element.ts    | 11 +++++++++++
 3 files changed, 21 insertions(+)
 create mode 100644 .changeset/spicy-bees-boil.md
 create mode 100644 packages/design-system/ui/src/utils/is-input-element.ts

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<HTMLButtonElement, CommandProps>(
   ) => {
     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 }