Fix: Make calendar hover event toggle explicit (#6639)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/widgets/calendar/event.jsx

@@ -39,8 +39,8 @@ export default function Event({ event, colorVariants, showDate = false, showTime
   return event.url ? (
     <a
       className={classNames(className, "hover:bg-theme-300/50 dark:hover:bg-theme-800/20")}
-      onMouseEnter={() => setHover(!hover)}
-      onMouseLeave={() => setHover(!hover)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
       key={key}
       href={event.url}
       target="_blank"
@@ -49,7 +49,7 @@ export default function Event({ event, colorVariants, showDate = false, showTime
       {children}
     </a>
   ) : (
-    <div className={className} onMouseEnter={() => setHover(!hover)} onMouseLeave={() => setHover(!hover)} key={key}>
+    <div className={className} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} key={key}>
       {children}
     </div>
   );

src/widgets/calendar/event.test.jsx

@@ -48,6 +48,56 @@ describe("widgets/calendar/event", () => {
     expect(link.querySelector("svg")).toBeTruthy();
   });
 
+  it("keeps additional text visible after repeated mouse enter events", () => {
+    const date = DateTime.fromISO("2099-01-01T13:00:00.000Z").setZone("utc");
+
+    render(
+      <Event
+        event={{
+          title: "Primary",
+          additional: "More info",
+          date,
+          color: "gray",
+          url: "https://example.com",
+        }}
+        colorVariants={{ gray: "bg-gray-500" }}
+      />,
+    );
+
+    const link = screen.getByRole("link", { name: /primary/i });
+
+    fireEvent.mouseEnter(link);
+    fireEvent.mouseEnter(link);
+    expect(screen.getByText("More info")).toBeInTheDocument();
+    expect(screen.queryByText("Primary")).toBeNull();
+  });
+
+  it("keeps title visible after repeated mouse leave events", () => {
+    const date = DateTime.fromISO("2099-01-01T13:00:00.000Z").setZone("utc");
+
+    render(
+      <Event
+        event={{
+          title: "Primary",
+          additional: "More info",
+          date,
+          color: "gray",
+        }}
+        colorVariants={{ gray: "bg-gray-500" }}
+      />,
+    );
+
+    const event = screen.getByText("Primary").closest("div.flex");
+
+    fireEvent.mouseEnter(event);
+    expect(screen.getByText("More info")).toBeInTheDocument();
+
+    fireEvent.mouseLeave(event);
+    fireEvent.mouseLeave(event);
+    expect(screen.getByText("Primary")).toBeInTheDocument();
+    expect(screen.queryByText("More info")).toBeNull();
+  });
+
   it("compareDateTimezone matches dates by day", () => {
     const day = DateTime.fromISO("2099-01-01T00:00:00.000Z").setZone("utc");
     expect(compareDateTimezone(day, { date: DateTime.fromISO("2099-01-01T23:59:00.000Z").setZone("utc") })).toBe(true);