Fix for using selected_files from previous downloads (#8413)

Author: egbertbouman

src/tribler/ui/src/components/add-torrent.tsx

@@ -16,7 +16,8 @@ import { useTranslation } from "react-i18next";
 export function AddTorrent() {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const inputRef = useRef<HTMLInputElement | null>(null);
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const uriInputRef = useRef<HTMLInputElement | null>(null);
 
     const [urlDialogOpen, setUrlDialogOpen] = useState<boolean>(false);
     const [uriInput, setUriInput] = useState('');
@@ -47,8 +48,8 @@ export function AddTorrent() {
                     </DropdownMenuItem>
                     <DropdownMenuItem
                         onClick={() => {
-                            if (inputRef && inputRef.current) {
-                                inputRef.current.click();
+                            if (fileInputRef && fileInputRef.current) {
+                                fileInputRef.current.click();
                             }
                         }}>
                         <FileIcon className="mr-2 h-4 w-4" />
@@ -74,10 +75,9 @@ export function AddTorrent() {
                         {t('MagnetDialogInputLabel')}
                         <div className="grid grid-cols-6 items-center gap-4">
                             <Input
+                                ref={uriInputRef}
                                 id="uri"
                                 className="col-span-5 pt-0"
-                                value={uriInput}
-                                onChange={(event) => setUriInput(event.target.value)}
                             />
                         </div>
                     </div>
@@ -86,7 +86,8 @@ export function AddTorrent() {
                             variant="outline"
                             type="submit"
                             onClick={() => {
-                                if (uriInput) {
+                                if (uriInputRef.current?.value) {
+                                    setUriInput(uriInputRef.current.value);
                                     setTorrent(undefined);
                                     setUrlDialogOpen(false);
                                     (async () => {
@@ -126,7 +127,7 @@ export function AddTorrent() {
 
             <input
                 style={{ display: 'none' }}
-                ref={inputRef}
+                ref={fileInputRef}
                 type="file"
                 accept=".torrent"
                 onChange={(event) => {

src/tribler/ui/src/dialogs/SaveAs.tsx

@@ -121,7 +121,7 @@ export default function SaveAs(props: SaveAsProps & JSX.IntrinsicAttributes & Di
             setMoveCompleted(false);
             setError(undefined);
             setExists(false);
-            setFiles([])
+            setFiles([]);
             const newSettings = await triblerService.getSettings();
             if (newSettings === undefined) {
                 setError(`${t("ToastErrorGetSettings")} ${t("ToastErrorGenNetworkErr")}`);
@@ -133,13 +133,14 @@ export default function SaveAs(props: SaveAsProps & JSX.IntrinsicAttributes & Di
             const safeSeeding = !!newSettings?.libtorrent?.download_defaults?.safeseeding_enabled;
             const safeDownloading = !!newSettings?.libtorrent?.download_defaults?.anonymity_enabled;
             setSettings(newSettings);
-            setParams({
-                ...params,
+            setParams(prev => ({
+                ...prev,
                 destination: newSettings?.libtorrent.download_defaults.saveas ?? '',
                 completed_dir: newSettings?.libtorrent.download_defaults.completed_dir ?? '',
                 anon_hops: safeDownloading ? newSettings.libtorrent.download_defaults.number_hops : 0,
                 safe_seeding: safeSeeding,
-            });
+                selected_files: []
+            }));
             setMoveCompleted((newSettings?.libtorrent?.download_defaults.completed_dir ?? '').length > 0);
 
             // Retrieve metainfo

src/tribler/ui/src/dialogs/SelectRemotePath.tsx

@@ -66,10 +66,10 @@ export default function SelectRemotePath(props: SelectRemotePathProps & JSX.Intr
                     <DialogTitle>{selectDir ? t('PleaseSelectDirectory') : t('PleaseSelectFile')}</DialogTitle>
                     <DialogDescription className="text-base break-all">
                         {(currentPath || initialPath).split(separator).map((dir, index, array) => {
-                            if (dir.length == 0 && index == 0) return <>{separator}</>
+                            if (dir.length == 0 && index == 0) return <span key={index}>{separator}</span>
                             else if (dir.length == 0) return
                             return (
-                                <>
+                                <span key={index}>
                                     <a className="cursor-pointer hover:text-black dark:hover:text-white"
                                         onClick={(event) => {
                                             let path = array.slice(0, index + 1).join(separator) + separator;
@@ -83,7 +83,7 @@ export default function SelectRemotePath(props: SelectRemotePathProps & JSX.Intr
                                         {dir}
                                     </a>
                                     {dir.endsWith(separator) ? "" : separator}
-                                </>
+                                </span>
                             )
                         })}
                     </DialogDescription>