Skip to content

feat(AnalyticalTable): add components that should not select a row when pressed #7517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 45 additions & 3 deletions packages/main/src/components/AnalyticalTable/Recipes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,53 @@ For further details please refer to the [`react-table` v7 documentation](https:/

## How to select rows containing active elements?

We've restricted the propagation of `click` events of UI5 Web Components elements such as `Button`, `Link`, `Switch`, etc.
In case you still want to select the row when clicking the respective element, you can "mark" the event to allow such behavior. <br />
We've restricted the `click` events of UI5 Web Components elements such as `Button`, `Link`, `Switch`, etc. to not fire the `onRowSelect` or `onRowClick` events of the `AnalyticalTable`. This is to prevent unwanted selection or row click behavior when interacting with these elements.
In case you still want to select or click the row when clicking the respective element, you can "mark" the event to allow such behavior.

Example: `<Link onClick={(e) => {e.markerAllowTableRowSelection = true;}>My Link Text</Link>`

For other elements or components, we recommend disabling event propagation by setting `event.stopPropagation()` on the respective event. Per default, propagation is not prevented!
For other elements or components, we recommend either disabling event propagation by calling `event.stopPropagation()` in the respective handler, or checking for the target. **Per default, propagation is not prevented!**

<details>

<summary>UI5 Web Components that Block Row Selection by Default</summary>

- UI5-AI-BUTTON
- UI5-AI-PROMPT-INPUT
- UI5-AVATAR
- UI5-BUTTON
- UI5-CALENDAR
- UI5-CHECKBOX
- UI5-COLOR-PICKER
- UI5-COMBOBOX
- UI5-DATE-PICKER
- UI5-DATERANGE-PICKER
- UI5-DATETIME-PICKER
- UI5-DURATION-PICKER
- UI5-DYNAMIC-DATE-RANGE
- UI5-FILE-UPLOADER
- UI5-ICON
- UI5-INPUT
- UI5-LINK
- UI5-MENU-ITEM
- UI5-MENU-ITEM-GROUP
- UI5-MULTI-COMBOBOX
- UI5-MULTI-INPUT
- UI5-RADIO-BUTTON
- UI5-RANGE-SLIDER
- UI5-RATING-INDICATOR
- UI5-SEGMENTED-BUTTON
- UI5-SELECT
- UI5-SLIDER
- UI5-SPLIT-BUTTON
- UI5-STEP-INPUT
- UI5-SWITCH
- UI5-TEXT-AREA
- UI5-TIME-PICKER
- UI5-TOGGLE-BUTTON
- UI5-UPLOAD-COLLECTION

</details>

## How to stop the table state from automatically resetting when the data changes?

Expand Down
6 changes: 6 additions & 0 deletions packages/main/src/components/AnalyticalTable/util/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ export function getBy(obj, path, def) {
}

export const tagNamesWhichShouldNotSelectARow = new Set([
'UI5-AI-BUTTON',
'UI5-AI-PROMPT-INPUT',
'UI5-AVATAR',
'UI5-BUTTON',
'UI5-CALENDAR',
Expand All @@ -70,10 +72,13 @@ export const tagNamesWhichShouldNotSelectARow = new Set([
'UI5-DATERANGE-PICKER',
'UI5-DATETIME-PICKER',
'UI5-DURATION-PICKER',
'UI5-DYNAMIC-DATE-RANGE',
'UI5-FILE-UPLOADER',
'UI5-ICON',
'UI5-INPUT',
'UI5-LINK',
'UI5-MENU-ITEM',
'UI5-MENU-ITEM-GROUP',
'UI5-MULTI-COMBOBOX',
'UI5-MULTI-INPUT',
'UI5-RADIO-BUTTON',
Expand All @@ -82,6 +87,7 @@ export const tagNamesWhichShouldNotSelectARow = new Set([
'UI5-SEGMENTED-BUTTON',
'UI5-SELECT',
'UI5-SLIDER',
'UI5-SPLIT-BUTTON',
'UI5-STEP-INPUT',
'UI5-SWITCH',
'UI5-TEXT-AREA',
Expand Down
Loading