adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.11k stars 1.14k forks source link

ListBox onAction breaks selection #6506

Open ArrayKnight opened 5 months ago

ArrayKnight commented 5 months ago

Provide a general summary of the issue here

Not sure if this is intended and undocumented or a bug

If you add an event listener to the onAction prop on the ListBox component, the standard selection behavior ceases to function

Maybe the expectation is that if you're listening to onAction you're handling all selection state externally(?)

I discovered this when implementing a story for the component and binding all event handler props to actions (logs)

๐Ÿค” Expected Behavior?

Either document this as expected behavior or allow for onAction to be listened to without breaking internal selection state management

๐Ÿ˜ฏ Current Behavior

Binding onAction causes presses to not update selection state

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

https://codesandbox.io/p/sandbox/amazing-solomon-ypvhz7

Version

1.2.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

snowystinger commented 5 months ago

Looks like we left out the onAction documentation for ListBox https://react-spectrum.adobe.com/react-aria/GridList.html#row-actions

What you want though is https://react-spectrum.adobe.com/react-aria/ListBox.html#selection-behavior to set this to "Replace" Then the default interaction will be selection and a double click will trigger the action, as it mentions in the GridList docs I linked to.

Otherwise, you need to provide a control to trigger selection on individual rows.

elianarlivingston commented 1 month ago

Hi! I'm facing a similar issue. I raised this as an issue and was recommended to use onAction. However, Iโ€™ve noticed that the onSelectionChange callback only fires when I hold down the option, which is not the behavior Iโ€™m expecting. Has anyone else encountered this problem? Iโ€™d appreciate any suggestions or alternative solutions.

snowystinger commented 1 month ago

@elianarlivingston was my previous comment able to explain it?

This issue is just open to add docs now

elianarlivingston commented 1 month ago

Hello, @snowystinger

Thank you for the previous clarification. I still have a couple of questions regarding the implementation of the useListBox hook, specifically about the behavior of the onAction and onSelectionChange functions.

I've noticed that when selecting an item, both functions execute correctly: onAction is invoked when an element is selected, and onSelectionChange updates the selection state. However, when deselecting an item, onAction does not execute, while onSelectionChange does get triggered to reflect the change in selection.

Is this behavior expected? I would like to understand why onAction does not get activated during deselection and if there is a recommended way to handle the logic associated with deselection in this context.

I appreciate your help and guidance.

Best regards

snowystinger commented 1 month ago

Can you provide a codesandbox demonstrating the issue? It will make figuring out what's going on much easier.