search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
269 stars 75 forks source link

[CalciteTreeItem] Children are not handling click events #8570

Open nikki-lea opened 5 months ago

nikki-lea commented 5 months ago

Check existing issues

Actual Behavior

In a CalciteButton in the actions-end slot of a CalciteTreeItem that is in a CalciteTree with slot="children", click events do not trigger.

Expected Behavior

Click events should trigger on actions in CalciteTreeItem

Reproduction Sample

https://codesandbox.io/p/sandbox/clickhandlingintrees-l4r7cr?file=%2Fsrc%2FApp.js%3A14%2C25

Reproduction Steps

  1. Expand 'Brewery'
  2. Click the properties icon next to 'Capitol'
  3. State is not set, click handler does not fire on click

Reproduction Version

2.1.0

Relevant Info

No response

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

Currently blocking feature for knowledge studio

Calcite package

Esri team

ArcGIS Enterprise

jcfranco commented 1 month ago

Took a quick look at this and I think this is caused by React's synthetic event system, which relies on event delegation, clashing with tree/tree-item stopping propagation of events when interacting with items (carryover from early implementation). Stopping propagation of events is something we want to avoid, so we'll have to refactor tree and tree-item accordingly.

driskull commented 2 weeks ago

Yeah, looking at tree/tree-item this needs a good refactoring.

Tree navigates with arrow keys but you cant' get to the slotted button with an arrow key. You have to use tab.

Once you are on the slotted button, you can't use enter key otherwise it closes the tree item.

the internal isActionEndEvent won't work if the event bubbles from a child action-end keydown/click.