Eventhandling DropContainer

Hi,

I tried the new DropContainer in my calendar and noticed some strange behavior.

My idea was as follows: When I start dragging an appointment in the EventCalendar, the DropContainer should open in the lower part of my application. The appointment I am dragging can then be dropped there. If I then re-enter the dropped appointment in the calendar, the DropContainer should close again.

However, the following error pattern is now observable: When dropping the appointment from the EventCalendar into the DropContainer, the “onItemDrop” event is NOT triggered. If I repeat the entire action, everything works flawlessly.

My working theory:
During the execution of the “onEventDragStart” event, the DropContainer is first displayed, making it an invalid target for a drop action?! If I then repeat the process and the DropContainer is still displayed, everything works flawlessly.

The same applies if I do not hide the DropContainer and display it when loading the application. In this case, the DropContainer also works flawlessly.

The two components are implemented as follows

Are there any ideas how I can change the behavior so that the DropEvent is processed the first time or is there still a bug here?

Thanks

Hi Sven,

Based on the shared details the source of the problem is that the DropContainer is not rendered initially and it is not receiving the onEventDragStart notification from the other components to listen for a draggable element. Probably this is why the second drop attempt is working because at that time the drop-container is already rendered.

To solve this problem you’ll have to make sure that the DropContainer is already rendered when the drag starts. In your case the display: none css is responsible for not rendering the DropContainer . A possible solution would be using the visibility: hidden rule.

Please let me know if this helps!

Hi,

thanks for the reply. That sounds plausible at first :slight_smile: I’ll try out your idea and get back to you.

Until now, thank you for the analysis and the solution idea

I have now implemented your changes and have gained new insights. The clean rendering was probably only part of the problem. It’s good that it’s now implemented correctly, but:
It still doesn’t work. And I think I now know why. As soon as I call the component <Eventcalendar … /> component (for example, by changing the height:
height={isDropzoneFilled ? parentHeight - 100 : parentHeight - 50}
) the described error occurs. If I do not re-render the event calendar, then everything works as desired (the drop zone is displayed and accepts the dropped events cleanly).

Hi @Sven_Wauro

Could you please send more implementation details? I wasn’t able to reproduce it. I am afraid I am missing something.

Thank you!