Merge pull request #3311 from bcgov/fix/hamed-enter-key-row-selection-3270

Fix: Allow Row Selection with Enter Key - 3270

Author: hamed-valiollahi

frontend/src/components/BCDataGrid/BCGridBase.jsx

@@ -20,7 +20,15 @@ import { useSearchParams } from 'react-router-dom'
 const ROW_HEIGHT = 45
 
 export const BCGridBase = forwardRef(
-  ({ autoSizeStrategy, autoHeight, ...props }, forwardedRef) => {
+  (
+    {
+      autoSizeStrategy,
+      autoHeight,
+      onRowClicked,
+      ...props
+    },
+    forwardedRef
+  ) => {
     ModuleRegistry.registerModules([ClientSideRowModelModule, CsvExportModule])
     const [searchParams] = useSearchParams()
     const highlightedId = searchParams.get('hid')
@@ -91,6 +99,41 @@ export const BCGridBase = forwardRef(
       }
     }, [])
 
+    // Handle keyboard events for row navigation
+    const onCellKeyDown = useCallback(
+      (params) => {
+        const e = params.event
+
+        if (e.code === 'Enter' && params.node) {
+          const cellEl = e.target.closest('.ag-cell')
+          if (!cellEl) return
+
+          const link = cellEl.querySelector('a[href]')
+          if (link) {
+            e.preventDefault()
+            e.stopPropagation()
+            link.click()
+            return
+          }
+
+          const focusables = cellEl.querySelectorAll(
+            'button, [href], :not(.ag-hidden) > input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          )
+          if (focusables.length === 0 && onRowClicked) {
+            e.preventDefault()
+            e.stopPropagation()
+            onRowClicked({ ...params, event: e })
+            return
+          }
+        }
+
+        if (props.onCellKeyDown) {
+          props.onCellKeyDown(params)
+        }
+      },
+      [props.onCellKeyDown, onRowClicked]
+    )
+
     // Expose clearFilters method through ref
     useImperativeHandle(forwardedRef, () => ({
       ...ref.current,
@@ -138,7 +181,9 @@ export const BCGridBase = forwardRef(
         rowHeight={ROW_HEIGHT}
         headerHeight={40}
         {...props}
+        onCellKeyDown={onCellKeyDown}
         onGridReady={onGridReady}
+        onRowClicked={onRowClicked}
       />
     )
   }

frontend/src/utils/grid/__tests__/eventHandlers.test.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { suppressKeyboardEvent, isEqual } from '../eventHandlers'
 
 // Helper to build a basic ag-cell DOM structure
@@ -55,6 +55,86 @@ describe('suppressKeyboardEvent', () => {
     event = { code: 'Tab', srcElement: input1, shiftKey: false, key: 'Tab' }
     expect(suppressKeyboardEvent({ event })).toBe(true)
   })
+
+  it('triggers row navigation when Enter is pressed and keyboard navigation is enabled', () => {
+    const cell = createCell()
+    const event = { code: 'Enter', srcElement: cell }
+    const mockOnRowClicked = vi.fn()
+    const mockParams = {
+      event,
+      node: { id: 'test-row' },
+      data: { id: 1 }
+    }
+
+    const result = suppressKeyboardEvent(mockParams, {
+      enableKeyboardRowNavigation: true,
+      onRowClicked: mockOnRowClicked
+    })
+
+    expect(result).toBe(true) // Should suppress default behavior
+    expect(mockOnRowClicked).toHaveBeenCalledWith({
+      ...mockParams,
+      event: expect.objectContaining({
+        target: cell,
+        currentTarget: cell
+      })
+    })
+  })
+
+  it('does not trigger row navigation when Enter is pressed but keyboard navigation is disabled', () => {
+    const cell = createCell()
+    const event = { code: 'Enter', srcElement: cell }
+    const mockOnRowClicked = vi.fn()
+    const mockParams = {
+      event,
+      node: { id: 'test-row' },
+      data: { id: 1 }
+    }
+
+    const result = suppressKeyboardEvent(mockParams, {
+      enableKeyboardRowNavigation: false,
+      onRowClicked: mockOnRowClicked
+    })
+
+    expect(result).toBe(false) // Should allow default behavior
+    expect(mockOnRowClicked).not.toHaveBeenCalled()
+  })
+
+  it('does not trigger row navigation when Enter is pressed but no onRowClicked handler is provided', () => {
+    const cell = createCell()
+    const event = { code: 'Enter', srcElement: cell }
+    const mockParams = {
+      event,
+      node: { id: 'test-row' },
+      data: { id: 1 }
+    }
+
+    const result = suppressKeyboardEvent(mockParams, {
+      enableKeyboardRowNavigation: true,
+      onRowClicked: null
+    })
+
+    expect(result).toBe(false) // Should allow default behavior
+  })
+
+  it('does not trigger row navigation when Enter is pressed but no node is provided', () => {
+    const cell = createCell()
+    const event = { code: 'Enter', srcElement: cell }
+    const mockOnRowClicked = vi.fn()
+    const mockParams = {
+      event,
+      node: null,
+      data: { id: 1 }
+    }
+
+    const result = suppressKeyboardEvent(mockParams, {
+      enableKeyboardRowNavigation: true,
+      onRowClicked: mockOnRowClicked
+    })
+
+    expect(result).toBe(false) // Should allow default behavior
+    expect(mockOnRowClicked).not.toHaveBeenCalled()
+  })
 })
 
 describe('isEqual utility', () => {

frontend/src/utils/grid/eventHandlers.jsx

@@ -1,13 +1,29 @@
-export const suppressKeyboardEvent = (params) => {
+export const suppressKeyboardEvent = (params, options = {}) => {
   const e = params.event
+  const { enableKeyboardRowNavigation = false, onRowClicked } = options
+
   if (e.code === 'Enter') {
     const focusableChildrenOfParent = e.srcElement
       .closest('.ag-cell')
       .querySelectorAll(
         'button, [href], :not(.ag-hidden) > input, select, textarea, [tabindex]:not([tabindex="-1"])'
       )
-    if (focusableChildrenOfParent.length === 0) return false
-    else return true
+
+    if (focusableChildrenOfParent.length === 0) {
+      if (enableKeyboardRowNavigation && onRowClicked && params.node) {
+        const mockClickEvent = {
+          ...e,
+          target: e.srcElement,
+          currentTarget: e.srcElement
+        }
+        onRowClicked({
+          ...params,
+          event: mockClickEvent
+        })
+        return true
+      }
+      return false
+    } else return true
   }
   if (e.code === 'Tab' || e.key === 'Tab' || e.code === 'ShiftLeft') {
     // get focusable children of parent cell