fix(AnalyticalTable): allow selecting all rows via keyboard (#6168)

Fixes #6110

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -623,6 +623,8 @@ describe('AnalyticalTable', () => {
     cy.findByTestId('payloadRowsById').should('have.text', '{"1":true,"2":true,"3":false}');
     cy.findByTestId('payloadAllRowsSelected').should('have.text', 'false');
 
+    //select all
+    //click
     cy.get('[data-row-index="0"][data-column-index="0"]').click();
     cy.get('@onRowSelectSpy').should('have.callCount', 6);
     cy.findByTestId('payload').should(
@@ -635,6 +637,33 @@ describe('AnalyticalTable', () => {
     );
     cy.findByTestId('payloadAllRowsSelected').should('have.text', 'true');
 
+    // enter (keydown)
+    cy.get('[data-row-index="0"][data-column-index="0"]').realPress('Enter');
+    cy.get('@onRowSelectSpy').should('have.callCount', 7);
+    cy.findByTestId('payload').should('have.text', '[]');
+    cy.findByTestId('payloadRowsById').should('have.text', '{}');
+    cy.findByTestId('payloadAllRowsSelected').should('have.text', 'false');
+
+    // Space (keyup) + ArrowDown => 1st row selected
+    cy.get('[data-row-index="0"][data-column-index="0"]').realPress(['Space', 'ArrowDown']);
+    cy.get('@onRowSelectSpy').should('have.callCount', 8);
+    cy.findByTestId('payload').should('have.text', '["0"]');
+    cy.findByTestId('payloadRowsById').should('have.text', '{"0":true}');
+    cy.findByTestId('payloadAllRowsSelected').should('have.text', 'false');
+
+    // Space (keyup) + ArrowUp => all rows selected
+    cy.get('[data-row-index="0"][data-column-index="0"]').realPress(['Space', 'ArrowUp']);
+    cy.get('@onRowSelectSpy').should('have.callCount', 9);
+    cy.findByTestId('payload').should(
+      'have.text',
+      '["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20"]'
+    );
+    cy.findByTestId('payloadRowsById').should(
+      'have.text',
+      '{"0":true,"1":true,"2":true,"3":true,"4":true,"5":true,"6":true,"7":true,"8":true,"9":true,"10":true,"11":true,"12":true,"13":true,"14":true,"15":true,"16":true,"17":true,"18":true,"19":true,"20":true}'
+    );
+    cy.findByTestId('payloadAllRowsSelected').should('have.text', 'true');
+
     cy.get('[data-row-index="0"][data-column-index="0"]').click();
 
     cy.findByText('Name-0').click();
@@ -647,7 +676,7 @@ describe('AnalyticalTable', () => {
     cy.findByTestId('payloadAllRowsSelected').should('have.text', 'false');
 
     cy.get('[data-row-index="0"][data-column-index="0"]').click();
-    cy.get('@onRowSelectSpy').should('have.callCount', 11);
+    cy.get('@onRowSelectSpy').should('have.callCount', 14);
     cy.findByTestId('payload').should('have.text', '["0","1","5","7","17","20"]');
     cy.findByTestId('payloadRowsById').should('have.text', '{"0":true,"1":true,"5":true,"7":true,"17":true,"20":true}');
     cy.findByTestId('payloadAllRowsSelected').should('have.text', 'false');
@@ -702,7 +731,7 @@ describe('AnalyticalTable', () => {
       '{"0":true,"1":true,"2":true,"3":true,"4":true,"5":true,"6":true,"7":true,"8":true,"9":true,"10":true,"11":true,"12":true,"13":true,"14":true,"15":true,"16":true,"17":true,"18":true,"19":true,"20":true}'
     );
     cy.findByTestId('payloadAllRowsSelected').should('have.text', 'true');
-    cy.get('@onRowSelectSpy').should('have.callCount', 16);
+    cy.get('@onRowSelectSpy').should('have.callCount', 19);
   });
 
   it('row & header height', () => {

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);
     }

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);

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);