fix autocomplete

src/components/autocomplete.tsx

@@ -1,5 +1,12 @@
+"use client"
 import { useState } from "react"
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "./ui/command"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+} from "./ui/command"
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
 import { Check, ChevronsUpDown } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -16,7 +23,6 @@ const Autocomplete = ({
     setPath,
 }: AutocompleteProperties) => {
     const [open, setOpen] = useState(false)
-    const [value, setValue] = useState("")
     const [input, setInput] = useState("")
 
     const getFolders = (files: File[]) =>
@@ -33,11 +39,7 @@ const Autocomplete = ({
                     aria-expanded={open}
                     className="w-[200px] justify-between"
                 >
-                    {value
-                        ? getFolders(downloadableFiles).find(
-                              (file) => file.name === value
-                          )?.name
-                        : "Destination folder"}
+                    {input ? input : "Destination folder"}
                     <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
             </PopoverTrigger>
@@ -47,25 +49,34 @@ const Autocomplete = ({
                         placeholder="Destination folder"
                         onValueChange={setInput}
                     />
-                    <CommandEmpty>{`Create folder "${input}"`}</CommandEmpty>
+                    <CommandEmpty
+                        onClick={() => {
+                            setInput(input)
+                            setPath(input)
+                            setOpen(false)
+                        }}
+                    >
+                        {`Create folder "${input}"`}
+                    </CommandEmpty>
                     <CommandGroup>
                         {getFolders(downloadableFiles).map((file) => (
                             <CommandItem
                                 key={file.name}
                                 value={file.name}
                                 onSelect={(currentValue) => {
-                                    setValue(
-                                        currentValue === value
+                                    setInput(
+                                        currentValue === input
                                             ? ""
                                             : currentValue
                                     )
                                     setPath(currentValue)
+                                    setOpen(false)
                                 }}
                             >
                                 <Check
                                     className={cn(
                                         "mr-2 h-4 w-4",
-                                        value === file.name
+                                        input === file.name
                                             ? "opacity-100"
                                             : "opacity-0"
                                     )}
@@ -80,4 +91,4 @@ const Autocomplete = ({
     )
 }
 
-export default Autocomplete
+export default Autocomplete

src/components/dropzone.tsx

@@ -1,28 +1,25 @@
-import React, { useRef, useState } from "react"
+import React, { useRef } from "react"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "./ui/badge"
 import { X } from "lucide-react"
 
-// Define the props expected by the Dropzone component
 interface DropzoneProps {
     setFiles: React.Dispatch<React.SetStateAction<string[]>>
     className?: string
     fileExtension?: string
     files: any[]
 }
 
-// Create the Dropzone component receiving props
 export function Dropzone({
     setFiles,
     className,
     fileExtension,
     files,
     ...props
 }: DropzoneProps) {
-    // Initialize state variables using the useState hook
     const fileInputRef = useRef<HTMLInputElement | null>(null) // Reference to file input element
-    const [error, setError] = useState<string | null>(null) // Error message state
+    //const [error, setError] = useState<string | null>(null) // Error message state
 
     // Function to handle drag over event
     const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
@@ -60,7 +57,7 @@ export function Dropzone({
         const fileList = Array.from(files)
         setFiles((prevFiles: any[]) => [...prevFiles, ...fileList])
 
-        setError(null) // Reset error state
+        //setError(null) // Reset error state
     }
 
     // Function to simulate a click on the file input element
@@ -115,7 +112,7 @@ export function Dropzone({
                         </Badge>
                     )
                 })}
-                {error && <span className="text-red-500">{error}</span>}
+                {/*error && <span className="text-red-500">{error}</span>*/}
             </CardContent>
         </Card>
     )

src/components/ui/command.tsx

@@ -75,7 +75,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className="py-6 text-center text-sm cursor-pointer"
     {...props}
   />
 ))