Dropzone sendbox stuck in droppable state when drop outside of Dropzone

[asianswagstorm]

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Edge (latest)

Which area does this issue affect?

Send box

Which theme pack does this issue affect?

Fluent UI

What is the public URL for the website?

No response

Please describe the bug

Dropping a file outside of the dropbox stuck in drop state,
you can drop the file anywhere in the page not the Dropzone, here its the sendbox where the file should be dropped in.

In this scenario I dropped the file outside of the sendbox, then I am stuck at this state.
This is a UI bug, alternatively I can refresh my chat or drop again.

Do you see any errors in console log?

no

How to reproduce the issue?

1. Navigate to ...
2. Click on ...
3. Type "..." in the send box

What do you expect?

Allow adding a prop to specify the dragenter, dragleave, dragend events.

• document.addEventListener('dragenter', handleDragEnter, false);
• document.addEventListener('dragleave', handleDragLeave, false);
• document.addEventListener('dragend', handleDragEnd, false);

https://github.com/microsoft/BotFramework-WebChat/blob/c3857bf9fb4ba963c50ef32cd03bf9c70f1da70e/packages/fluent-theme/src/components/dropZone/DropZone.tsx

is adding a drag event on the entire document.

In sendbox maybe add a ref prop so that you can only drop at the send box and dropping outside will just reset dropZoneState back to false.

BotFramework-WebChat/packages/fluent-theme/src/components/sendBox/SendBox.tsx

Line 8 in c3857bf

import { DropZone } from '../dropZone';

What actually happened?

Dropping a file outside of dropzone dropZoneState stays at droppable, even though no drag event.

Do you have any screenshots or recordings to repro the issue?

Yes, you can drop the file anywhere outside the sendbox

Adaptive Card JSON

Additional context

No response

[OEvgeny]

The issue seems to be browser isn't sending dragend event as drop resulted in the new tab opened. This is only my guess though, as the issue description isn't very helpful.

[asianswagstorm]

so how can we trigger a dragend instead of opening the file? https://github.com/microsoft/BotFramework-WebChat/blob/c3857bf9fb4ba963c50ef32cd03bf9c70f1da70e/packages/fluent-theme/src/components/dropZone/DropZone.tsx

dragover preventDefault in the DropZone?

[OEvgeny]

Need to check the best strategy to determine if the drag action is over, then set up a handler on drag start to track it.