Skip to content

[RFC] feat(ui5-li): add semantic click event to ListItemBase#13315

Open
ilhan007 wants to merge 1 commit intomainfrom
feat/semantic-click-listitembase
Open

[RFC] feat(ui5-li): add semantic click event to ListItemBase#13315
ilhan007 wants to merge 1 commit intomainfrom
feat/semantic-click-listitembase

Conversation

@ilhan007
Copy link
Contributor

Summary

  • Adds a public click CustomEvent to ListItemBase, enabling framework consumers (React, Angular, Vue) to attach onClick handlers directly on list items (<ListItemStandard onClick={...}>) instead of relying on the parent container's item-click event
  • Event detail includes item (the ListItemBase instance) and originalEvent (the underlying mouse/keyboard event), matching the Button's semantic click pattern
  • Native click from shadow DOM <li> is stopped via stopPropagation() to prevent duplicate events reaching consumers
  • All components extending ListItemBase inherit this behavior: ListItemStandard, MenuItem, TreeItem, NotificationListItem, UploadCollectionItem, etc.

Resolves #13304

Changes

packages/main/src/ListItemBase.ts

  • Added @event("click", { bubbles: true }) decorator
  • Added ListItemBaseClickEventDetail type with item and originalEvent
  • fireItemPress() now fires fireDecoratorEvent("click", { item, originalEvent }) alongside existing _press
  • _onclick() calls e.stopPropagation() before fireItemPress() to suppress native click from shadow DOM

Test plan

  • List.cy.tsx — 5 new tests (click, Enter, Space, disabled, backward compat with item-click)
  • Menu.cy.tsx — 3 new tests (click, Enter, backward compat with item-click)
  • Tree.cy.tsx — 5 new tests (click, Enter, Space, disabled, backward compat with item-click)
  • Tests listen for "click" (not "ui5-click") and assert calledOnce to verify no duplicate native+semantic events
  • All existing tests pass (92 List, 41 Menu, 26 Tree)
  • Lint passes

Fire a public CustomEvent("click") with { item, originalEvent } detail
from ListItemBase.fireItemPress(), covering mouse click, Enter, and
Space activation. Native click from shadow DOM <li> is stopped via
stopPropagation to prevent duplicate events reaching consumers.

All components extending ListItemBase (ListItemStandard, MenuItem,
TreeItem, NotificationListItem, etc.) inherit this behavior.

Resolves #13304
@ilhan007 ilhan007 force-pushed the feat/semantic-click-listitembase branch from 488384b to 46c7b2a Compare March 23, 2026 09:29
@ui5-webcomponents-bot
Copy link
Collaborator

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview March 23, 2026 09:37 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: add semantic click events on child components (ListItem, MenuItem, Tab, etc.)

2 participants