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