From 23e66a265d3eb716f8b57fcafe05b7fa57eb49d8 Mon Sep 17 00:00:00 2001
From: Thielquis <benji@7fun.de>
Date: Thu, 7 May 2026 16:15:25 +0200
Subject: [PATCH] Fix: Make calendar hover event toggle explicit (#6639)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
---
 src/widgets/calendar/event.jsx      |  6 ++--
 src/widgets/calendar/event.test.jsx | 50 +++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/widgets/calendar/event.jsx b/src/widgets/calendar/event.jsx
index ff06b32be..66abf2f6f 100644
--- a/src/widgets/calendar/event.jsx
+++ b/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>
   );
diff --git a/src/widgets/calendar/event.test.jsx b/src/widgets/calendar/event.test.jsx
index 56b37b159..048bf4372 100644
--- a/src/widgets/calendar/event.test.jsx
+++ b/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);