feat: improve canvas card editing experience with navigation suppression

- Added logic to suppress card navigation while editing the canvas name to prevent accidental navigation.
- Introduced a flag to manage in-flight save operations, ensuring that multiple save requests are not processed simultaneously.
- Enhanced the editing flow by ensuring the input is selected after a brief delay, improving user interaction.
This commit is contained in:
Matthias
2026-03-27 09:00:35 +01:00
parent 806c92fc80
commit 0bc4785850

View File

@@ -27,12 +27,20 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
const [editName, setEditName] = useState(canvas.name); const [editName, setEditName] = useState(canvas.name);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const suppressCardNavigationRef = useRef(false);
const saveInFlightRef = useRef(false);
const updateCanvas = useMutation(api.canvases.update); const updateCanvas = useMutation(api.canvases.update);
const handleStartEdit = useCallback(() => { const handleStartEdit = useCallback(() => {
suppressCardNavigationRef.current = true;
setEditName(canvas.name); setEditName(canvas.name);
setIsEditing(true); setIsEditing(true);
setTimeout(() => inputRef.current?.select(), 0); setTimeout(() => {
inputRef.current?.select();
setTimeout(() => {
suppressCardNavigationRef.current = false;
}, 0);
}, 0);
}, [canvas.name]); }, [canvas.name]);
const handleSave = useCallback(async () => { const handleSave = useCallback(async () => {
@@ -46,6 +54,8 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
return; return;
} }
if (saveInFlightRef.current) return;
saveInFlightRef.current = true;
setIsSaving(true); setIsSaving(true);
try { try {
await updateCanvas({ canvasId: canvas._id, name: trimmedName }); await updateCanvas({ canvasId: canvas._id, name: trimmedName });
@@ -55,6 +65,7 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
toast.error("Fehler beim Umbenennen"); toast.error("Fehler beim Umbenennen");
} finally { } finally {
setIsSaving(false); setIsSaving(false);
saveInFlightRef.current = false;
} }
}, [editName, canvas.name, canvas._id, updateCanvas]); }, [editName, canvas.name, canvas._id, updateCanvas]);
@@ -79,6 +90,7 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
}, [isEditing, handleSave]); }, [isEditing, handleSave]);
const handleCardClick = useCallback(() => { const handleCardClick = useCallback(() => {
if (suppressCardNavigationRef.current) return;
if (!isEditing) { if (!isEditing) {
onNavigate(canvas._id); onNavigate(canvas._id);
} }