Prevent RunFrame keydown blur from breaking Circuit JSON search in the editor preview (#3030)

Author: rushabhcodes

src/components/package-port/CodeAndPreview.tsx

@@ -187,13 +187,22 @@ export function CodeAndPreview({ pkg, projectUrl, isPackageFetched }: Props) {
   })
 
   const isMouseOverRunFrame = useRef(false)
+  const runFrameContainerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const handleKeyDown = () => {
-      if (isMouseOverRunFrame.current) {
-        ;(document.activeElement as HTMLElement)?.blur()
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isMouseOverRunFrame.current) return
+
+      const target = event.target
+      if (
+        target instanceof Node &&
+        runFrameContainerRef.current?.contains(target)
+      ) {
+        return
       }
+      ;(document.activeElement as HTMLElement | null)?.blur()
     }
+
     window.addEventListener("keydown", handleKeyDown)
     return () => window.removeEventListener("keydown", handleKeyDown)
   }, [])
@@ -268,6 +277,7 @@ export function CodeAndPreview({ pkg, projectUrl, isPackageFetched }: Props) {
               : "w-full md:w-1/2",
             !state.showPreview && "hidden",
           )}
+          ref={runFrameContainerRef}
           onMouseEnter={() => (isMouseOverRunFrame.current = true)}
           onMouseLeave={() => (isMouseOverRunFrame.current = false)}
         >