fix(AnalyticalTable): don't select row when an actionable element was clicked (#432)

Closes #428

Author: MarcusNotheis

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)) {

packages/main/src/components/AnalyticalTable/index.tsx

@@ -122,7 +122,13 @@ export interface TableProps extends CommonProps {
 const useStyles = createComponentStyles(styles, { name: 'AnalyticalTable' });
 
 /**
- * <code>import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';</code>
+ * <code>import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';</code><br />
+ * <br />
+ * ### Usage Notes
+ * By default, the `AnalyticalTable` will not select any rows after clicking on active elements like a `Button`, `Link`,
+ * etc. <br />
+ * In case you want to select the row anyways, you can "mark" the event to allow such a behaviour. <br />
+ * Example: `<Link onClick={(e) => {e.markerAllowTableRowSelection = true;}>My Link Text</Link>`
  */
 const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<HTMLDivElement>) => {
   const {