Limit event scope

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext, SyntheticEvent } from 'react' // eslint-disable-line
+import React, { useEffect, useState, useRef, SyntheticEvent } from 'react' // eslint-disable-line
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
 import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
 import { FileExplorerContextMenu } from './file-explorer-context-menu' // eslint-disable-line
@@ -35,6 +35,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     copyElement: []
   })
   const [canPaste, setCanPaste] = useState(false)
+  const treeRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (contextMenuItems) {
@@ -57,6 +58,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }, [props.focusEdit])
 
   useEffect(() => {
+    if (treeRef.current) {
       const keyPressHandler = (e: KeyboardEvent) => {
         if (e.shiftKey) {
           setState(prevState => {
@@ -72,14 +74,17 @@ export const FileExplorer = (props: FileExplorerProps) => {
           })
         }
       }
+      const targetDocument = treeRef.current
   
-    document.addEventListener('keydown', keyPressHandler)
+      targetDocument.addEventListener('keydown', keyPressHandler)
-    document.addEventListener('keyup', keyUpHandler)
+      targetDocument.addEventListener('keyup', keyUpHandler)
+      targetDocument.focus()
       return () => {
-      document.removeEventListener('keydown', keyPressHandler)
+        targetDocument.removeEventListener('keydown', keyPressHandler)
-      document.removeEventListener('keyup', keyUpHandler)
+        targetDocument.removeEventListener('keyup', keyUpHandler)
       }
-  }, [])
+    }
+  }, [treeRef.current])
 
   useEffect(() => {
     if (canPaste) {
@@ -406,7 +411,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   return (
-    <div>
+    <div ref={treeRef} tabIndex={0} style={{ outline: "none" }}>
       <TreeView id='treeView'>
         <TreeViewItem id="treeViewItem"
           controlBehaviour={true}

libs/remix-ui/workspace/src/lib/css/file-explorer.css

@@ -1,5 +1,6 @@
 .remixui_label {
     margin-top        : 4px;
+    user-select: none;
 }
 .remixui_leaf {
     overflow          : hidden;