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 {