From 63a8e725db3570e2cc93b79b2b5d9b7dd42a77d2 Mon Sep 17 00:00:00 2001
From: barna <53086573+barna52@users.noreply.github.com>
Date: Tue, 17 Oct 2023 14:52:53 +0200
Subject: [PATCH] fix(lion-calendar): Make calendar buttons selectable on
 firefox through datepicker (#2080)

---
 .changeset/yellow-timers-poke.md                    | 5 +++++
 packages/ui/components/calendar/src/LionCalendar.js | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/yellow-timers-poke.md

diff --git a/.changeset/yellow-timers-poke.md b/.changeset/yellow-timers-poke.md
new file mode 100644
index 000000000..be83479bb
--- /dev/null
+++ b/.changeset/yellow-timers-poke.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+lion-calendar: when determining if user interacted with a day button, use event.composedPath()[0] instead of event.target to fix Firefox 111+ issue
diff --git a/packages/ui/components/calendar/src/LionCalendar.js b/packages/ui/components/calendar/src/LionCalendar.js
index 0a10b1b17..434311e5b 100644
--- a/packages/ui/components/calendar/src/LionCalendar.js
+++ b/packages/ui/components/calendar/src/LionCalendar.js
@@ -799,7 +799,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __clickDateDelegation(ev) {
-    const el = /** @type {HTMLElement & { date: Date }} */ (ev.target);
+    const el = /** @type {HTMLElement & { date: Date }} */ (ev.composedPath()[0]);
     if (isDayButton(el) && !isDisabledDayButton(el)) {
       this.__dateSelectedByUser(el.date);
     }
@@ -866,7 +866,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     switch (ev.key) {
       case ' ':
       case 'Enter':
-        this.__dayButtonSelection(/** @type {HTMLElement & { date: Date }} */ (ev.target));
+        this.__dayButtonSelection(
+          /** @type {HTMLElement & { date: Date }} */ (ev.composedPath()[0]),
+        );
         break;
       case 'ArrowUp':
         this.__modifyDate(-7, { dateType: '__focusedDate', type: 'Date' });