ListBox selectionBehavior="replace" sometimes behaves as if it's "toggle"

staticshock commented 4 months ago

Provide a general summary of the issue here

If you spend some time selecting items in a ListBox (one at a time, with trackpad, tap-to-click enabled, no modifier keys) sometimes it'll add to the existing selection instead of replacing the selection wholesale.

🤔 Expected Behavior?

The selection should always be replaced wholesale.

😯 Current Behavior

Sometimes (unpredictably) the selection grows to more than one item, which, I believe, should be impossible.

💁 Possible Solution

I haven't looked into it; don't know root cause.

🔦 Context

Just trying to get drag-and-drop working between a few ListBoxes, looking to mimic how file selection works in the major OS file explorers. Implementing drag-and-drop is not necessary to reproduce the issue.

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/dark-surf-dbyh42?file=%2Fsrc%2FApp.tsx

I'm borrowing this sample code from #4391, which seems like it might be related but is not totally overlapping.

Version

"react-aria": "^3.32.1",
"react-aria-components": "^1.1.1",
"react-stately": "^3.30.1",
"tailwindcss-react-aria-components": "^1.1.1"

What browsers are you seeing the problem on?

Reproducing in Chrome (123.0.6312.107), Arc (1.37.0), Firefox (124.0.2)

Can't reproduce in Safari (17.4.1)

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

staticshock commented 4 months ago

The issue is not 100% reproducible, but here are a few observations:

~I have a sneaking suspicion and/or superstition that it helps to make and clear selection on a second item once or twice via Cmd+Click, after which a few regular Clicks can be sufficient to manifest the issue. This seems to help, but does not seem necessary; I've also reproduced it with regular single clicks.~ (I no longer believe this; see below.)
~The issue seems to disappear completely if I try to record a video using the macOS screenshot utility. I wonder if the recording mode changes something subtle about the way the mouse events hit the browser?~ (I've invalidated this too; see below.)

staticshock commented 4 months ago

Ok, finally got a video:

https://github.com/adobe/react-spectrum/assets/13100/1c0d276a-f88b-4d83-ba03-18288f1851d4

Here I reproduced the issue first, then started recording. In the recording, I'm using a trackpad with tap-to-click enabled, and each action is a single tap, never a shift-tap or cmd-tap.

staticshock commented 4 months ago

I'm starting to believe that tap-to-click is essential to reproducing the issue, and selecting a second item via cmd+click is not essential.

snowystinger commented 4 months ago

Thanks for the issue, I can reproduce, but only with tap to click as you noted and it is very difficult to reproduce consistently.

piecyk commented 4 months ago

Thanks for the issue, I can reproduce, but only with tap to click as you noted and it is very difficult to reproduce consistently.

btw noticed that current the multi select with CMD is not working on macOS chrome/firefox, but is all good on safari. @snowystinger did something changed? as i'm pretty sure that it was working.

https://github.com/adobe/react-spectrum/assets/82964/83ce5674-a7e6-465e-9d4f-dd94601b64ce

staticshock commented 4 months ago

@piecyk: multi-select via Cmd+tap and Cmd-click work for me in the above sandbox in chrome 124 and firefox 124 (macOS)

snowystinger commented 4 months ago

Thanks @staticshock @piecyk I'm also unable to reproduce anything in the codesandbox for CMD click's in any of the browsers. Works fine here too https://react-spectrum.adobe.com/react-aria/GridList.html#row-actions

adobe / react-spectrum