refactor: improve keyboard navigation in year grid

motss · May 26, 2021 · 8ecbf25 · 8ecbf25
1 parent c253e9e
commit 8ecbf25
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/date-picker/date-picker.ts b/src/date-picker/date-picker.ts
@@ -56,10 +56,6 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
   @state()
   private _selectedDate: Date;
 
-  // @state()
-  // private startView: CalendarView = 'calendar';
-  //#endregion private states
-
   //#region private properties
   #formatters: Formatters;
   private _TODAY_DATE: Date;

diff --git a/src/year-grid/year-grid.ts b/src/year-grid/year-grid.ts
@@ -53,20 +53,21 @@ export class YearGrid extends LitElement implements YearGridProperties {
     return this.data.formatters != null;
   }
 
+  public willUpdate(changedProperties: YearGridChangedProperties): void {
+    if (changedProperties.has('data')) {
+      this.#selectedYear = this.data.date.getUTCFullYear();
+    }
+  }
+
   protected async firstUpdated(): Promise<void> {
     const selectedYearGridButton = await this.selectedYearGridButton;
 
     if (selectedYearGridButton) {
+      selectedYearGridButton.focus();
       selectedYearGridButton.scrollIntoView();
     }
   }
 
-  public willUpdate(changedProperties: YearGridChangedProperties): void {
-    if (changedProperties.has('data')) {
-      this.#selectedYear = this.data.date.getUTCFullYear();
-    }
-  }
-
   protected render(): TemplateResult | typeof nothing {
     const {
       date,
@@ -110,8 +111,6 @@ export class YearGrid extends LitElement implements YearGridProperties {
   }
 
   #updateYear = (ev: MouseEvent | KeyboardEvent): void => {
-
-
     if (['keydown', 'keyup'].includes(ev.type)) {
       const { keyCode } = ev as KeyboardEvent;
       const keyCodeNum = keyCode as typeof keyCode extends Set<infer U> ? U : never;
@@ -120,6 +119,9 @@ export class YearGrid extends LitElement implements YearGridProperties {
         !(yearGridNavigationKeyCodeSet.has(keyCodeNum) && ev.type === 'keydown')
       ) return;
 
+      // Stop scrolling with arrow keys
+      ev.preventDefault();
+
       // Focus new year with Home, End, and arrow keys
       const {
         max,
@@ -136,12 +138,11 @@ export class YearGrid extends LitElement implements YearGridProperties {
         `button[data-year="${selectedYear}"]`
       );
 
+      this.#selectedYear = selectedYear;
+
       if (selectedYearGridButton) {
         selectedYearGridButton.focus();
-        selectedYearGridButton.scrollIntoView();
       }
-
-      this.#selectedYear = selectedYear;
     } else {
       const selectedYearGridButton = toClosestTarget(ev, `button[data-year]`);