From d5080f59afb622117e2ba096984011a275758c04 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 19 Feb 2026 20:38:11 +0800
Subject: [PATCH] fixed day view visual bug

---
 frontend/src/components/calendar/CalendarPage.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index 609bdfe..9f73484 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import FullCalendar from '@fullcalendar/react';
@@ -12,6 +12,7 @@ import EventForm from './EventForm';
 
 export default function CalendarPage() {
   const queryClient = useQueryClient();
+  const calendarRef = useRef<FullCalendar>(null);
   const [showForm, setShowForm] = useState(false);
   const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null);
   const [selectedStart, setSelectedStart] = useState<string | null>(null);
@@ -130,6 +131,9 @@ export default function CalendarPage() {
   };
 
   const handleDateSelect = (selectInfo: DateSelectArg) => {
+    // Clear the selection mirror immediately so it doesn't vanish
+    // jarringly when the user clicks into the form's title field
+    calendarRef.current?.getApi().unselect();
     setSelectedStart(selectInfo.startStr);
     setSelectedEnd(selectInfo.endStr);
     setSelectedAllDay(selectInfo.allDay);
@@ -153,6 +157,7 @@ export default function CalendarPage() {
       <div className="flex-1 overflow-y-auto p-6">
         <div className="bg-card rounded-lg border p-4">
           <FullCalendar
+            ref={calendarRef}
             plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
             initialView="dayGridMonth"
             headerToolbar={{