From 637b7462c4d5bc05a90dd4f8573360038470702c Mon Sep 17 00:00:00 2001
From: Zach Bean <38841359+zb140@users.noreply.github.com>
Date: Tue, 7 Apr 2026 14:05:14 -0500
Subject: [PATCH] fix(kosync): use Fragment keys to prevent form field issues
 (#3791)

* Use key attrs to prevent form field issues

Fixes #3790.

* PR feedback: use Fragment keys instead of individual element keys
---
 .../src/app/reader/components/KOSyncSettings.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/KOSyncSettings.tsx b/apps/readest-app/src/app/reader/components/KOSyncSettings.tsx
index fc12f3c6..1004f2a6 100644
--- a/apps/readest-app/src/app/reader/components/KOSyncSettings.tsx
+++ b/apps/readest-app/src/app/reader/components/KOSyncSettings.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { Fragment, useState, useEffect, useMemo, useCallback } from 'react';
 import { md5 } from 'js-md5';
 import { type as osType } from '@tauri-apps/plugin-os';
 import { useEnv } from '@/context/EnvContext';
@@ -218,7 +218,7 @@ export const KOSyncSettingsWindow: React.FC = () => {
       {isOpen && (
         <div className='mb-4 mt-0 flex flex-col gap-4 p-2 sm:p-4'>
           {isConfigured ? (
-            <>
+            <Fragment key='configured'>
               <div className='text-center'>
                 <p className='text-base-content/80 text-sm'>
                   {_('Sync as {{userDisplayName}}', {
@@ -275,9 +275,9 @@ export const KOSyncSettingsWindow: React.FC = () => {
                   onChange={handleDeviceNameChange}
                 />
               </div>
-            </>
+            </Fragment>
           ) : (
-            <>
+            <Fragment key='login'>
               <p className='text-base-content/70 text-center text-sm'>
                 {_('Connect to your KOReader Sync server.')}
               </p>
@@ -333,7 +333,7 @@ export const KOSyncSettingsWindow: React.FC = () => {
               {connectionStatus && (
                 <div className='text-error h-4 text-center text-sm'>{connectionStatus}</div>
               )}
-            </>
+            </Fragment>
           )}
         </div>
       )}