feat(ui5-table-row): add semantic click event on TableRow#13303
feat(ui5-table-row): add semantic click event on TableRow#13303
Conversation
TableRow now fires its own custom `click` event when an interactive row is activated via mouse click or Enter key. The native click is intercepted and suppressed, replaced by a CustomEvent that covers both mouse and keyboard activation — matching the established pattern used by Button, Link, Icon, and other components. This enables React consumers using `createReactComponent` to attach `onClick` handlers directly on `<TableRow>`. The existing Table-level `row-click` event is preserved for backward compatibility.
e2b5b14 to
4d181eb
Compare
Move @CustomElement decorator right after the @Class JSDoc block, and place the event JSDoc + @eventStrict after it — matching the established ordering used by Button and other components.
|
🚀 Deployed on https://pr-13303--ui5-webcomponents-preview.netlify.app |
aborjinik
left a comment
There was a problem hiding this comment.
-2
Sorry Petar, this doesn’t make sense to me. TableRow is not an atomic component like Button, Link, or Icon. It can contain interactive elements inside. We should not change the meaning of the native click event just to provide convenience for a group of consumers, regardless of its size.
Also, a component should never stop the (immediate) propagation of an event without fully handling it especially when we don't know how it's being used.
Overall, I'm against this approach. It would also be incompatible if someone is already using the row’s click event. But I'm fine with introducing a separate event (e.g. press or rowClick) that represents this behavior. The main issue is changing the meaning of click and stopping the propagation.
| template: TableRowTemplate, | ||
| }) | ||
| /** | ||
| * Fired when the row is activated by the user via click or Enter key. |
Summary
ui5-table-rownow fires its own customclickevent when an interactive row is activated via mouse click or Enter keyButton) and replaced with aCustomEventthat unifies mouse and keyboard activationrow-clickevent is preserved for backward compatibilityButton,Link,Icon,CardHeader, and other componentsThis enables React consumers using
createReactComponentto attachonClickhandlers directly on<TableRow>:Implementation details
@eventStrict("click", { bubbles: true })declared onTableRoweventDetails.clickdeclared onTableRowBaseto maintain JSX type compatibility across the hierarchy (same pattern asSideNavigationItemBase)stopImmediatePropagationin a constructor-registered listener, then forwarded to the Table's event router soTableNavigationand other extensions still work_handleClick()firesfireDecoratorEvent("click")followed by_table._onRowClick()for backward compatTest plan
row-clicktest still passesTableSelections.cy.tsx) all pass — RowOnly behavior unaffected