fix: fix @material/mwc-dialog closes unexpectedly for all Enter keys

motss · Nov 20, 2021 · 3951f86 · 3951f86
1 parent a0b49b9
commit 3951f86
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/date-picker-dialog/date-picker-dialog.ts b/src/date-picker-dialog/date-picker-dialog.ts
@@ -150,5 +150,3 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
     this.value = undefined;
   }
 }
-
-// FIXME: Do not close dialog when enter/ space or select new year
diff --git a/src/month-calendar/month-calendar.ts b/src/month-calendar/month-calendar.ts
@@ -225,6 +225,13 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
     const type = event.type as 'click' | 'keydown' | 'keyup';
 
     if (type === 'keydown') {
+      /**
+       * NOTE: `@material/mwc-dialog` captures Enter keyboard event then closes the dialog.
+       * This is not what `month-calendar` expects so here stops all event propagation immediately for
+       * all key events.
+       */
+      event.stopImmediatePropagation();
+
       const isConfirmKey = confirmKeySet.has(key as InferredFromSet<typeof confirmKeySet>);
 
       if (

diff --git a/src/year-grid/year-grid.ts b/src/year-grid/year-grid.ts
@@ -112,8 +112,15 @@ export class YearGrid extends RootElement implements YearGridProperties {
 
   #updateYear = (event: KeyboardEvent): void => {
     if (event.type === 'keydown') {
+      /**
+       * NOTE: `@material/mwc-dialog` captures Enter keyboard event then closes the dialog.
+       * This is not what `year-grid` expects so here stops all event propagation immediately for
+       * all key events.
+       */
+      event.stopImmediatePropagation();
+
       const key =
-        event.key as InferredFromSet<typeof navigationKeySetGrid>;
+      event.key as InferredFromSet<typeof navigationKeySetGrid>;
 
       if (!navigationKeySetGrid.has(key)) return;