Single-item GridList with DragAndDrop reorder caveats
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide your feedback here.
We're using GridList with drag and drop for re-ordering. Depending on the dynamically sourced data, it happens that the GridList only contains one GridListItem.
When that happens, we would prefer not to have to render a ``. However, this warning is emitted, causing us to reconsider: https://github.com/adobe/react-spectrum/blob/d8161f6a9157193da3ab66b732f660300a39b720/packages/react-aria-components/src/GridList.tsx#L337-L342
I tried following the logic and found myself at https://github.com/adobe/react-spectrum/blob/69109f0036d58b0afe7b3539c69361bec934aa43/packages/react-aria-components/src/useDragAndDrop.tsx#L114
I could easily do (and tried) something like `getItems: myList.length <= 1 ? undefined : regularLogic`, and that worked fine, _except_, the behavior was not disabled. In other words, I could still reach the `reordering` state with keyboard interactions, I just couldn't see where the focus went when it would previously have gone to the drag handle.
In the end, combining `isDisabled: myList.length <= 1` with the `getItems`-shenanigans from above seems to seal the deal, but it left me with a feeling of having battled rather than collaborated with the library.
I think there are a few different approaches here, and would be happy to learn which you think is most in line with how this library is intended to function:
1. Bypass this whole issue by conditionally rendering a `GridList` if there are 2+ items in the list, opting for other solutions otherwise.
2. Just accept that the drag handle is visible even when it has no functionality.
3. Do something like what was described above.
### 🔦 Context
We're just battling some warnings trying to write maintainable, user friendly code.
### 💻 Code Sample
_No response_
### Version
react-aria-components 1.4.1
### What browsers are you seeing the problem on?
_No response_
### If other, please specify
_No response_
### What operating system are you using?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.