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.
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.
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).