diff --git a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts index 7bbc2d081fb..5cb019748dd 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useSingleRowStateSelection.ts @@ -18,12 +18,34 @@ const getRowProps = (rowProps, { row }) => { ]; }; +const tagNamesWhichShouldNotSelectARow = new Set([ + 'UI5-INPUT', + 'UI5-LINK', + 'UI5-BUTTON', + 'UI5-CHECKBOX', + 'UI5-COMBOBOX', + 'UI5-DATEPICKER', + 'UI5-MULTI-COMBOBOX', + 'UI5-SELECT', + 'UI5-RADIOBUTTON', + 'UI5-SEGMENTEDBUTTON', + 'UI5-SWITCH', + 'UI5-TOGGLEBUTTON' +]); + const useInstance = (instance) => { const { webComponentsReactProperties, dispatch, toggleRowSelected, selectedFlatRows } = instance; const { isTreeTable, selectionMode, onRowSelected, selectionBehavior } = webComponentsReactProperties; const selectSingleRow = useCallback( (row, e, selectionCellClick = false) => { + if ( + tagNamesWhichShouldNotSelectARow.has(e.target.tagName) && + !(e.markerAllowTableRowSelection === true || e.nativeEvent?.markerAllowTableRowSelection === true) + ) { + return; + } + const isEmptyRow = row.original?.emptyRow; if ([TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode) && !isEmptyRow) { if (row.isGrouped || (TableSelectionBehavior.ROW_SELECTOR === selectionBehavior && !selectionCellClick)) { diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index bdbc71315ee..1bbac94a032 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -122,7 +122,13 @@ export interface TableProps extends CommonProps { const useStyles = createComponentStyles(styles, { name: 'AnalyticalTable' }); /** - * import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable'; + * import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
+ *
+ * ### Usage Notes + * By default, the `AnalyticalTable` will not select any rows after clicking on active elements like a `Button`, `Link`, + * etc.
+ * In case you want to select the row anyways, you can "mark" the event to allow such a behaviour.
+ * Example: ` {e.markerAllowTableRowSelection = true;}>My Link Text` */ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref) => { const {