added key events to popup component

app/components/FilesEditor/AddDocument/index.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import React from "react";
+import React, { useState, useRef } from "react";
 import AddDocumentIcon from "@/components/Icons/AddDocument";
 import Popup from "@/components/Popup";
-import { useState } from "react";
 import Pterodactyl from "@/components/Pterodactyl";
 import { useSearchParams } from "next/navigation";
 
@@ -14,11 +13,18 @@ const Index = () => {
   const serverId = urlParams.get("serverid") || "";
   const pathParam = urlParams.get("path") || "/";
   const apiKey = `${process.env.NEXT_PUBLIC_API_KEY}`;
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const pterodactyl = new Pterodactyl();
 
   function togglePopup() {
     setShowPopup(!showPopup);
+    if (!showPopup) {
+      // set focus on input
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
   }
 
   function handleOk() {
@@ -42,6 +48,7 @@ const Index = () => {
       >
         <div>
           <input
+            ref={inputRef}
             type="text"
             className="input input-sm input-bordered mb-4 text-base-content"
             placeholder="File name"
@@ -58,7 +65,7 @@ const Index = () => {
         className="btn btn-sm"
       >
         <AddDocumentIcon />
-        Add Document
+        Add Document 
       </button>
     </>
   );