fix: prevent faulty event bubbling when clicking on month day event (#…

…216)
tomosterlund · Dec 1, 2023 · ca95519 · ca95519
1 parent f1ae1dd
commit ca95519
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/month/Day.vue b/src/components/month/Day.vue
@@ -9,7 +9,7 @@
       'is-selected': isSelected,
       'is-today': isToday,
     }"
-    @click="emitDayWasClicked"
+    @click.self="emitDayWasClicked"
     @dragleave="handleDragLeave"
     @dragover="handleDragOver"
     @drop="handleDrop"

diff --git a/tests/unit/components/month/Day.test.ts b/tests/unit/components/month/Day.test.ts
@@ -82,6 +82,15 @@ describe("Day.vue", () => {
     expect(underTest.emitted("date-was-clicked")[0][0]).toBe("2022-05-23");
   });
 
+  it('should not emit "date-was-clicked" when an event is clicked', () => {
+    const underTest = day({ props: defaultProps });
+    const dayEvent = underTest.find(".calendar-month__event");
+
+    dayEvent.trigger("click");
+
+    expect(underTest.emitted("date-was-clicked")).toBeFalsy();
+  })
+
   it('should not emit custom event "day-was-selected" when qalendar !isSmall and a day is clicked', async () => {
     const underTest = day({ props: {
       ...defaultProps,