fix(AnalyticalTable): allow selecting all rows via keyboard

SAP · Aug 6, 2024 · 9b79b91 · 9b79b91
1 parent 656ad5a
commit 9b79b91
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -44,6 +44,7 @@ export interface ColumnHeaderProps {
   id: string;
   onClick: MouseEventHandler<HTMLDivElement> | undefined;
   onKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;
+  onKeyUp?: KeyboardEventHandler<HTMLDivElement> | undefined;
   className: string;
   style: CSSProperties;
   column: ColumnType;
@@ -80,6 +81,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
     visibleColumnIndex,
     onClick,
     onKeyDown,
+    onKeyUp,
     isFiltered,
     title,
     'aria-label': ariaLabel,
@@ -131,7 +133,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
   const hasPopover = column.canGroupBy || column.canSort || column.canFilter;
 
   const handleHeaderCellClick = (e) => {
-    onClick?.(e);
+    if (typeof onClick === 'function') {
+      onClick(e);
+    }
     if (hasPopover) {
       setPopoverOpen(true);
     }
@@ -142,7 +146,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
     : { left: 0, transform: `translateX(${virtualColumn.start}px)` };
 
   const handleHeaderCellKeyDown = (e) => {
-    onKeyDown?.(e);
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(e);
+    }
     if (hasPopover && e.code === 'Enter') {
       setPopoverOpen(true);
     }
@@ -152,6 +158,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
   };
 
   const handleHeaderCellKeyUp = (e) => {
+    if (typeof onKeyUp === 'function') {
+      onKeyUp(e);
+    }
     if (hasPopover && e.code === 'Space' && !e.target.hasAttribute('ui5-li')) {
       setPopoverOpen(true);
     }

diff --git a/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts b/packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts
@@ -349,6 +349,9 @@ function getPayload(e, column) {
 const setHeaderProps = (headerProps, { instance: { dispatch }, column }) => {
   // resize col with keyboard
   const handleKeyDown = (e) => {
+    if (typeof headerProps.onKeyDown === 'function') {
+      headerProps.onKeyDown(e);
+    }
     if (e.nativeEvent.shiftKey) {
       if (e.key === 'ArrowRight') {
         const payload = getPayload(e, column);

diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx
@@ -6,7 +6,8 @@ import type { ReactTableHooks } from '../types/index.js';
 
 const customCheckBoxStyling = {
   verticalAlign: 'middle',
-  pointerEvents: 'none'
+  pointerEvents: 'none',
+  display: 'block'
 } as CSSProperties;
 
 /*
@@ -78,6 +79,9 @@ const headerProps = (props, { instance }) => {
     selectionMode === AnalyticalTableSelectionMode.Multiple
   ) {
     const onClick = (e) => {
+      if (typeof props.onClick === 'function') {
+        props.onClick(e);
+      }
       toggleAllRowsSelected(!isAllRowsSelected);
       const isFiltered = filters?.length > 0 || !!globalFilter;
       if (typeof onRowSelect === 'function') {
@@ -97,6 +101,9 @@ const headerProps = (props, { instance }) => {
     };
 
     const onKeyDown = (e) => {
+      if (typeof props.onKeyDown === 'function') {
+        props.onKeyDown(e);
+      }
       if (e.code === 'Enter' || e.code === 'Space') {
         e.preventDefault();
         if (e.code === 'Enter') {
@@ -106,6 +113,9 @@ const headerProps = (props, { instance }) => {
     };
 
     const onKeyUp = (e) => {
+      if (typeof props.onKeyUp === 'function') {
+        props.onKeyUp(e);
+      }
       if (e.code === 'Space') {
         e.preventDefault();
         onClick(e);