Monitor.getItem loses its state with NativeTypes.file

[seanaye]

Describe the bug
Depending on where an item is dragged from, monitor.getItem loses the state of DataTransferItems. If a file is dragged directly to the ref element from the os then the state will be tracked properly until the drag leaves the bounds of the browser window. If the same drag is brought back then the DataTransferItems will be empty.

What's worse is if the drag enters the browser with the cursor not directly over the ref element then the DataTransferItems will never be populated.

Reproduction
Open the console in the sandbox, then start dragging a file, at first it will have the correct mime type but then it will go away

Live Reproduction

Steps to reproduce the behavior:

1. Open the console in the sandbox
2. Start dragging a file from your OS
3. At first mime type is correctly displayed but then it goes away

Expected behavior
DataTransferItems should not be cleared on the same drag

Desktop (please complete the following information):

• OS: MacOS 11.5.1
• Browser: Brave Browser (Chromium)
• Version: Version 1.30.86 Chromium: 94.0.4606.61 (Official Build) (arm64)

[ahoisl]

I can confirm that this issues is partly fixed, but the state is still lost when the ref element is left, i.e. when you drag over the element and then leave it again -> item is empty again.

Additionally, the collect hook seems not to be called when the item changes, resulting in stale data returned from the useDrop hook.

Happens on Windows with standard Chrome and newest dependencies:
OS: Windows 10
Browser: Chrome 99.0.4844.51

Does not happen with Firefox.

See an updated Sandbox here: https://codesandbox.io/s/dark-haze-fxw4u3?file=/src/hooks/useFileDrop.ts