diff --git a/client/src/components/Chat/Input/Files/AttachFile.tsx b/client/src/components/Chat/Input/Files/AttachFile.tsx index 49e5c650de..206048870d 100644 --- a/client/src/components/Chat/Input/Files/AttachFile.tsx +++ b/client/src/components/Chat/Input/Files/AttachFile.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { FileUpload, TooltipAnchor } from '~/components/ui'; import { AttachmentIcon } from '~/components/svg'; import { useLocalize } from '~/hooks'; @@ -14,19 +14,37 @@ const AttachFile = ({ handleFileChange: (event: React.ChangeEvent) => void; }) => { const localize = useLocalize(); + const inputRef = useRef(null); const isUploadDisabled = disabled ?? false; return ( - + { + if (!inputRef.current) { + return; + } + if (e.key === 'Enter' || e.key === ' ') { + inputRef.current.value = ''; + inputRef.current.click(); + } + }} + onClick={() => { + if (!inputRef.current) { + return; + } + inputRef.current.value = ''; + inputRef.current.click(); + }} >
diff --git a/client/src/components/ui/FileUpload.tsx b/client/src/components/ui/FileUpload.tsx index f7f6976797..3481a36e8e 100644 --- a/client/src/components/ui/FileUpload.tsx +++ b/client/src/components/ui/FileUpload.tsx @@ -1,43 +1,29 @@ -import React, { useRef } from 'react'; +import React, { forwardRef } from 'react'; type FileUploadProps = { - handleFileChange: (event: React.ChangeEvent) => void; - onClick?: () => void; className?: string; + onClick?: () => void; children: React.ReactNode; + handleFileChange: (event: React.ChangeEvent) => void; }; -const FileUpload: React.FC = ({ - handleFileChange, - children, - onClick, - className = '', -}) => { - const fileInputRef = useRef(null); +const FileUpload = forwardRef( + ({ children, handleFileChange }, ref) => { + return ( + <> + {children} + + + ); + }, +); - const handleButtonClick = () => { - if (onClick) { - onClick(); - } - // necessary to reset the input - if (fileInputRef.current) { - fileInputRef.current.value = ''; - } - fileInputRef.current?.click(); - }; - - return ( -
- {children} - -
- ); -}; +FileUpload.displayName = 'FileUpload'; export default FileUpload; diff --git a/client/src/components/ui/Switch.tsx b/client/src/components/ui/Switch.tsx index f24e7edd51..8145901c7a 100644 --- a/client/src/components/ui/Switch.tsx +++ b/client/src/components/ui/Switch.tsx @@ -8,7 +8,7 @@ const Switch = React.forwardRef< >(({ className, ...props }, ref) => (