Update dnd examples to focus inserted items on drop #1721
Conversation
|
Build successful! 🎉 |
When dropping a single item in between items in the list, I don't think it should become selected unless it was selected before the drag and drop operation. Since dragging multiple items requires the items to be selected, I think the behavior you have implemented, where items dropped between items in the list remain selected, and the first of the items has focus is appropriate. When dropping one or more items on an item, like a folder, the drop target should display focus, but I don't think the drop target should become selected if it was not already selected.
I think you're right about this, if we don't select the dropped items and there is no focus ring or focused state when you drop the items, it may be difficult for a mouse user to remember which items were dropped.
That would be ideal because, depending on the complexity of implementing this behavior manually, users might opt to omit it. |
|
I don't think we can know this in general, e.g. when dragging from Finder or somewhere outside the page. Feels to me like selecting is useful in most cases, especially when dropping multiple items since we can't focus multiple items at once.
Yeah I agree. Updated to just show the focus ring instead when dropping on an item and no items are inserted.
Yeah agreed. I added support for doing this by default, but there are some limitations. You must insert the items immediately on drop (within 50ms). When asynchronous behavior is involved things get very complicated very quickly. We can document how to do it manually for these cases, but I think this default should cover most use cases. |
|
Build successful! 🎉 |
| // and for React to re-render. If an insert occurs during this time, it will be selected/focused below. | ||
| // If items are not "immediately" inserted by the onDrop handler, the application will need to handle | ||
| // selecting and focusing those items themselves. | ||
| setTimeout(() => { |
There was a problem hiding this comment.
We need to save the timeout reference in case of unmount so we can cancel it
|
Build successful! 🎉 |
* Update dnd examples to focus inserted items on drop * Automatically focus and select items on drop * Review changes
Behavior is: