Fix Cursor Jumping When Changing Station Title

njfdev · Jul 23, 2024 · 2d948ce · 2d948ce
1 parent a49b390
commit 2d948ce
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/SavedStationsMenu.tsx b/src/components/SavedStationsMenu.tsx
@@ -167,6 +167,8 @@ function SavedStationCard({
   loadingStation: Station | undefined;
   updateRequestedStation: (station?: Station) => void;
 }) {
+  const [newTitle, setNewTitle] = useState(station.title);
+
   const isCurrentStationPlaying =
     isStationPlaying &&
     currentStation &&
@@ -179,12 +181,15 @@ function SavedStationCard({
         <div className="flex justify-between align-middle items-center gap-4">
           <CardTitle>
             <Input
-              value={station.title}
+              value={newTitle}
               className="text-lg"
               onChange={(e) => {
+                setNewTitle(e.target.value || "");
+              }}
+              onBlur={() => {
                 updateStation(station, {
                   ...station,
-                  title: e.target.value || "",
+                  title: newTitle,
                 });
               }}
             />