diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 03451a1733d..c25b450ff40 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -25,6 +25,7 @@ import {
import { useManualRowSelect } from './pluginHooks/useManualRowSelect';
import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection';
import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import type { RowType } from '@/packages/main/src/components/AnalyticalTable/types/index.js';
import { getUi5TagWithSuffix } from '@/packages/main/src/internal/utils.js';
const generateMoreData = (count) => {
@@ -3416,6 +3417,78 @@ describe('AnalyticalTable', () => {
cy.get('[data-component-name="ATHeaderPopover"]').should('not.exist');
});
+ it('Interactive Cell content', () => {
+ const columns: AnalyticalTableColumnDefinition[] = [
+ { Header: 'Name', accessor: 'name' },
+ {
+ Header: 'Custom',
+ id: 'custom',
+ Cell: ({ row }: { row: RowType }) => {
+ switch (row.index) {
+ case 0:
+ return ;
+ case 1:
+ return (
+
+ );
+ default:
+ return ;
+ }
+ }
+ }
+ ];
+ const TestComp = () => {
+ const [selected, setSelected] = useState({});
+ return (
+ <>
+ {
+ setSelected(e.detail.selectedRowIds);
+ }}
+ />
+ {JSON.stringify(selected)}
+
+ >
+ );
+ };
+ cy.mount();
+ // for some reason only required for React18
+ cy.wait(300);
+
+ // Pressing SPACE inside input components should work
+ // Focus: (1,0) -> (col, row)
+ cy.realPress('Tab');
+ // (1,1)
+ cy.realPress('ArrowDown');
+ cy.focused().realPress('Space');
+ cy.findByTestId('sel').should('have.text', '{"0":true}');
+ // (2,1)
+ cy.realPress('ArrowRight');
+ cy.focused().realPress('Space');
+ cy.findByTestId('sel').should('have.text', '{}');
+ // Focus: Input (2,1)
+ cy.realPress('Tab');
+ cy.focused().type('3Spaces 2Spaces ');
+ cy.focused().should('have.value', '3Spaces 2Spaces ');
+ cy.findByTestId('sel').should('have.text', '{}');
+ // (2,2)
+ cy.realPress('ArrowDown');
+ // Focus: Button (2,2)
+ cy.realPress('Tab');
+ cy.focused().realPress('Space');
+ cy.findByTestId('sel').should('have.text', '{}');
+ cy.findByTestId('btn-was-clicked').should('have.text', 'true');
+ });
+
cypressPassThroughTestsFactory(AnalyticalTable, { data, columns });
});
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts
index 10bc559d3ac..cd7bf51b413 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts
@@ -65,7 +65,9 @@ const getRowProps = (rowProps, { row, instance }: { row: RowType; instance: Tabl
}
handleRowSelect(e);
}
- if (e.code === 'Space') {
+
+ // only prevent the default behavior if event was invoked in cell (not e.g. Input)
+ if (e.code === 'Space' && e.target.role === 'gridcell') {
e.preventDefault();
}
};