List: Expose Events for dragging between Lists

[Csmith246]

Actual Behavior

For the Calcite List component, when you set dragEnabled to true, and the group value of more than two lists to the same key, and then move items between the lists, none of the current Event's on the List get triggered. This makes it difficult to react to drags between lists.

Expected Behavior

When a List Item gets dragged from one List to a different List, maybe trigger events such as calciteListDragOut and calciteListDragIn on the respective lists. This would broadcast what specifically has occurred within the lists, and allow the wider application to perform any behaviors that are tied to a move between lists.

Reproduction Sample

https://codepen.io/csmith55/pen/YzJMzYg?editors=1001
https://codepen.io/geospatialem/pen/OJaGeVN

Reproduction Steps

Notice in the sample that:

• Each list has the same group value
• All events are being tracked on List 1

If you drag any list items from list 2 or 3 into list 1, no events are fired. If you drag any out of List 1, still no events are fired.

Reproduction Version

https://www.npmjs.com/package/@esri/calcite-components/v/1.4.1-next.4
1.5.1

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

Technically, I don't believe this behavior has ever worked, but we got around that in our application by finding a reference to the internal SortableJS object and adding onAdd and onRemove methods. This fix on the Calcite side (b4bbdf3) caused our work around not to work anymore, so an official solution is now desirable. Thanks!

Esri team

ArcGIS Instant Apps

[Csmith246]

@driskull Would you have any update on this?

[geospatialem]

@driskull Would you have any update on this?

@Csmith246 With value-list's deprecation, we're working towards parity and support with list and list-item with dragging from #6554. That being said, the parity is to provide functionality as it is depicted in value-list today, so we could repurpose this issue for list and list-item once dragging is supported.

Will update the request to list and list-item. As for a timeline, will be part of an upcoming triage session for future consideration.

[geospatialem]

With the list sorting support in 1.5.1, it looks like the events are exposed with the exception if a new list-item is added to the list. The request should include adding a listener if a new list-item is added, perhaps with the calciteListOrderChange event?

Updated Codepen to list/list-item in 1.5.1: https://codepen.io/geospatialem/pen/OJaGeVN

Recording showing events are registered, unless a list-item is added to the first list:

[Csmith246]

@geospatialem we've got a requirement for supporting accessible keyboard dragging between lists, as well. Could we add that to this issue? Or would it be better to make a new enhancement request for that?

[geospatialem]

@geospatialem we've got a requirement for supporting accessible keyboard dragging between lists, as well. Could we add that to this issue? Or would it be better to make a new enhancement request for that?

Great question, @Csmith246! For tracking could you create a new enhancement request? It seems like a good enhancement to separate out from the events.

[driskull]

We're using the onSort event from SortableJS and that should happen anytime there's an add or remove.

https:/SortableJS/Sortable

// Called by any change to the list (add / update / remove)
onSort: function (/**Event*/evt) {
  // same properties as onEnd
},

We'll need to investigate why its not emitting correctly. My guess is that its something we're doing to fix VDOM errors.

Bumped this issue to estimate-5. cc @geospatialem

[driskull]

I think we can mark this one as a bug as well.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.7.0

[Csmith246]

Big thank you from Instant Apps! 🙏