Drag gesture on list-item unresponsive when inside a list-item-group

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Given a drag-enabled list of grouped items, dragging an item's handle is unresponsive and does not change item's position within the group.

Interestingly, keyboard navigation does still work. Focusing the drag handle and pressing space+up/down arrow does change the position of the item within the group.

Expected Behavior

An item can be dragged and re-positioned within its item-group.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/list/

Reproduction Steps

1. Visit the list doc page
2. Choose the "List with groups" sample
3. Enable the drag-enabled property
4. Attempt to drag an item within its group

Reproduction Version

2.12.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

A workaround may be to wrap the list-item contents of the group within a list:

<calcite-list>
  <calcite-group>
    <calcite-list>
      <calcite-list-item />
      …
    </calcite-list>
  </calcite-group>
</calcite-list>

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

[geospatialem]

Thanks for reporting @nwhittaker!

For Calcite team members during mitigation -- It appears this is not a regression, as this has been the case when list-item's are within a list-item-group. However, there is keyboard support - not necessarily a workaround - but the functionality is present for keyboard users in 2.10.0 and above, but not for mouse users.

[driskull]

We should doc this as a known limitation.

[driskull]

A workaround may be to wrap the list-item contents of the group within a list:

This might be the best solution. The other option is to setup dragging on the calcite-list-item-group element.