Bug: DropZone can-drop styles can cause flickering during drag

[dave-gcv]

I have noticed that under certain circumstances the can-drop css style that gets applied to drop zones can quickly toggle off/on during drag operations. This can cause flickering issues when using the css class to apply custom styles.

It seems to occur when there are already items in the target zone and you drag an item over any of the current items. Behaviour is ok and as expected when dragging the item in the zone where there is empty space. This is reproducable on the demo page https://blazor.radzen.com/dropzone

You can see from the uploaded video clip the class changes in the developer console during drag.

dropzone.mp4

[dave-gcv]

Seems very similar to this Stackoverflow issue from a few years back:
https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element

[dave-gcv]

Update : I don't know if it's related but I've also noticed that the ItemSelector event gets fired continuously while hovering over a dropzone.

I was under the impression that this event was only used upon initialisation of the component (or when a drop is completed) in order to determine the which zone an item belongs to? Seems that if this is alway firing it's a potential bottleneck/cause of lag
or the apparent bouncing between the "can-drop" / "no-drop" classes being removed and applied etc

As you can see from the attached screen recording, the longer you hover over the dropzone (without dropping) the event is fired. When eventually released there is a noticable delay before the UI catches up

dropzone2.mp4