Adding a min size for select box before it starts selecting items

[cathykc]

First of all - thank you for open sourcing this component! It's saving me a lot of time since I don't need to build this entirely from scratch.

---

Thoughts on adding an option to set a min size for the select box before it triggers the duringSelection?

When people click their mouse it's highly likely that while the mouse is down they move their mouse slightly. This means a drag event is triggered and that the item gets selected so the original click event (e.g. open a modal) doesn't actually happen. This can be confusing to users as they think they just did a mouse click.

Happy to submit a PR but want to make sure that you think this would be a good edit :) Happy to chat more.

[Samin100]

This is a great recommendation! A quick hotfix I've found to work well at allowing normal click events to still happen is to swap the event.preventDefault() from being called in the mousedown event handler, and instead call it in mousemove event handler. I'm wondering why this isn't the default behavior, as it makes mouse clicks on a draggable element far more reliable at preventing unintended drag starts.

[heri16]

This is a great recommendation! A quick hotfix I've found to work well at allowing normal click events to still happen is to swap the event.preventDefault() from being called in the mousedown event handler, and instead call it in mousemove event handler. I'm wondering why this isn't the default behavior, as it makes mouse clicks on a draggable element far more reliable at preventing unintended drag starts.

Not sure what is meant by this. Maybe post permalinks to the lines involved?

[ludwighen]

totally agree. I was having the same problem. @Samin100 could you explain your solution?

[PaulRyan97]

Also having the same problem, any update on this?

[ludwighen]

I made a PR with this changes #101
But as pointed out, this repo might not be regularly maintained, so if you want to use my fork with the fix:

npm install github:ludwighen/react-selectable-fast

it adds a minSelectSize prop to the SelectableGroup where you can specify pixels distance moved before the selection starts.
I found 8 or 10 to be a good value.

<SelectableGroup minSelectSize={8}>