diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx index ee863ad8084..278fb9b9874 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx +++ b/packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx @@ -95,12 +95,22 @@ const headerProps = (props, { instance }) => { }; const onKeyDown = (e) => { - if (e.code === 'Space' || e.code === 'Enter') { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault(); + if (e.code === 'Enter') { + onClick(e); + } + } + }; + + const onKeyUp = (e) => { + if (e.code === 'Space') { e.preventDefault(); onClick(e); } }; - return [props, { onClick, onKeyDown, style, title: isAllRowsSelected ? deselectAllText : selectAllText }]; + + return [props, { onClick, onKeyDown, onKeyUp, style, title: isAllRowsSelected ? deselectAllText : selectAllText }]; } return props; }; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts index e09b5abe052..45333853250 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts @@ -54,24 +54,40 @@ const getRowProps = (rowProps, { row, instance }) => { } }; + const handleKeyDown = (e) => { + if ((!e.target.hasAttribute('aria-expanded') || (e.shiftKey && e.code === 'Space')) && e.code === 'Enter') { + if ( + !webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has( + getTagNameWithoutScopingSuffix(e.target.tagName) + ) + ) { + e.preventDefault(); + } + handleRowSelect(e); + } + if (e.code === 'Space') { + e.preventDefault(); + } + }; + + const handleKeyUp = (e) => { + if (!e.target.hasAttribute('aria-expanded') && !e.shiftKey && e.code === 'Space') { + if ( + !webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has( + getTagNameWithoutScopingSuffix(e.target.tagName) + ) + ) { + e.preventDefault(); + } + handleRowSelect(e); + } + }; + return [ rowProps, { - onKeyDown: (e) => { - if ( - (!e.target.hasAttribute('aria-expanded') || (e.shiftKey && e.code === 'Space')) && - (e.key === 'Enter' || e.code === 'Space') - ) { - if ( - !webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has( - getTagNameWithoutScopingSuffix(e.target.tagName) - ) - ) { - e.preventDefault(); - } - handleRowSelect(e); - } - }, + onKeyDown: handleKeyDown, + onKeyUp: handleKeyUp, onClick: handleRowSelect } ]; diff --git a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx index bb0c89dfe8a..6df51f7b06b 100644 --- a/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx +++ b/packages/main/src/components/AnalyticalTable/pluginHooks/useRowDisableSelection.tsx @@ -93,14 +93,28 @@ export const useRowDisableSelection = (disableRowSelection: DisableRowSelectionT } }; const onKeyDown = (e) => { - if (e.code === 'Space' || e.code === 'Enter') { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault(); + if (e.code === 'Enter' && typeof webComponentsReactProperties.onRowClick === 'function') { + webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row })); + } + } + }; + const onKeyUp = (e) => { + if (e.code === 'Space') { e.preventDefault(); if (typeof webComponentsReactProperties.onRowClick === 'function') { webComponentsReactProperties.onRowClick(enrichEventWithDetails(e, { row })); } } }; - return { ...rowProps, onClick: handleClick, onKeyDown, className: webComponentsReactProperties.classes.tr }; + return { + ...rowProps, + onClick: handleClick, + onKeyDown, + onKeyUp, + className: webComponentsReactProperties.classes.tr + }; } return rowProps; };