adobe / adobe/react-spectrum

Single-item GridList with DragAndDrop reorder caveats

Open
#7,386 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.