fix(filters): open Date via Enter key not Tab for better accessibility

packages/common/src/filters/__tests__/compoundDateFilter.spec.ts

@@ -136,6 +136,7 @@ describe('CompoundDateFilter', () => {
       locale: 'en',
       onChangeToInput: expect.any(Function),
       onClickDate: expect.any(Function),
+      openOnFocus: false,
       onShow: expect.any(Function),
       positionToInput: 'auto',
       sanitizerHTML: expect.any(Function),
@@ -375,6 +376,22 @@ describe('CompoundDateFilter', () => {
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: null, shouldTriggerQuery: true });
   });
 
+  it('should show picker when pressing Enter key', () => {
+    filterArguments.searchTerms = ['2000-01-01'];
+    mockColumn.filter!.operator = '<=';
+    const showSpy = vi.spyOn(filter, 'show');
+
+    filter.init(filterArguments);
+    filter.show();
+    const filterInputElm = divContainer.querySelector('.search-filter.filter-finish input.date-picker') as HTMLInputElement;
+    const calendarElm = document.body.querySelector('.vc') as HTMLDivElement;
+
+    expect(calendarElm).toBeTruthy();
+
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    expect(showSpy).toHaveBeenCalled();
+  });
+
   it('should create the input filter with a default search terms when passed as a filter argument', () => {
     filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
     mockColumn.filter!.operator = '<=';

packages/common/src/filters/__tests__/dateRangeFilter.spec.ts

@@ -116,6 +116,7 @@ describe('DateRangeFilter', () => {
       monthsToSwitch: 2,
       onChangeToInput: expect.any(Function),
       onClickDate: expect.any(Function),
+      openOnFocus: false,
       onShow: expect.any(Function),
       positionToInput: 'auto',
       sanitizerHTML: expect.any(Function),
@@ -239,6 +240,22 @@ describe('DateRangeFilter', () => {
     });
   });
 
+  it('should show picker when pressing Enter key', () => {
+    filterArguments.searchTerms = ['2001-01-02', '2001-01-13'];
+    mockColumn.filter!.operator = 'RangeInclusive';
+    const showSpy = vi.spyOn(filter, 'show');
+
+    filter.init(filterArguments);
+    filter.show();
+    const filterInputElm = divContainer.querySelector('.date-picker.search-filter.filter-finish input.date-picker') as HTMLInputElement;
+    const calendarElm = document.body.querySelector('.vc') as HTMLDivElement;
+
+    expect(calendarElm).toBeTruthy();
+
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
+    expect(showSpy).toHaveBeenCalled();
+  });
+
   it('should create the input filter with a default search terms when passed as a filter argument', () => {
     const selectedDates = ['2001-01-02', '2001-01-13'];
     filterArguments.searchTerms = ['2001-01-02', '2001-01-13'];

packages/common/src/filters/dateFilter.ts

@@ -120,11 +120,17 @@ export class DateFilter implements Filter {
       }
     }) as EventListener);
 
-    // clear date picker + compound operator when Backspace is pressed
     this._bindEventService.bind(this._dateInputElm, 'keydown', ((e: KeyboardEvent) => {
+      // clear date picker + compound operator when Backspace is pressed
       if (e.key === 'Backspace') {
+        e.preventDefault();
         this.clear(true, false); // clear value but trigger a value change event
       }
+      // show picker on enter key but make sure it's the input not the operator compound select
+      else if (e.key === 'Enter' && e.target === this._dateInputElm) {
+        e.stopImmediatePropagation();
+        this.show();
+      }
     }) as EventListener);
   }
 
@@ -161,15 +167,11 @@ export class DateFilter implements Filter {
   }
 
   hide(): void {
-    if (typeof this.calendarInstance?.hide === 'function') {
-      this.calendarInstance.hide();
-    }
+    this.calendarInstance?.hide();
   }
 
   show(): void {
-    if (typeof this.calendarInstance?.show === 'function') {
-      this.calendarInstance.show();
-    }
+    this.calendarInstance?.show();
   }
 
   getValues(): string | Date | string[] | Date[] | undefined {
@@ -276,6 +278,7 @@ export class DateFilter implements Filter {
       locale: currentLocale,
       selectedTheme: this.gridOptions?.darkMode ? 'dark' : 'light',
       positionToInput: 'auto',
+      openOnFocus: false,
       sanitizerHTML: (dirtyHtml) => this.grid.sanitizeHtmlString(dirtyHtml),
       selectedWeekends: [],
       type: this.inputFilterType === 'range' ? 'multiple' : 'default',