Custom event does not propperly render when using DnDCalendar

[btalexraescu]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/react-big-calendar-withdnd-nr0vek?file=/src/App.js

Bug description

Whenever on an event I want to open a modal that shows up some of the event details. The modal is rendered when I use simle Calendar but does not work when I use Calendar with drag and drop. In order to identify which is the "active" event, I'm keeping an internal state with the id of the clicked event

Expected Behavior

The modal should open

Actual Behavior

The modal does not open

react-big-calendar version

1.6.2

React version

18.2.0

Platform/Target and Browser Versions

MacOs/Ubuntu, Google Chrome

Validations

• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[bu6n]

The modal probably shows inside the event somewhere. You should try to have your modal component at the same level as the calendar.

[btalexraescu]

In my real case scenario I have a tooltip instead of modal. And tooltip is attached to event.
My hunch is that when I instantiate the calendar with DND, I pass the components as props. When I pass a new flavor of components, calendar does not rerender. On initial look in /src/addons/dragAndDrop/withDragAndDrop.js in constructor I see

 this.components = mergeComponents(components, {
        eventWrapper: EventWrapper,
        eventContainerWrapper: EventContainerWrapper,
        weekWrapper: WeekWrapper,
      })

but this.components never gets updated if I pass a new flavor of components as it happens with simple Calendar (no DnD).

[btalexraescu]

Are there any updates on this one? Is there anything else I can assist with?

[bu6n]

I think you would have to do it differently: have a modal/tooltip that's outside your Event component. Then when you click on the event onSelectSlot(event, syntheticEvent) gets fired. The synthetic event should contain information from where the user clicked. From there on you should be able to calculate where to place your modal and what content to put in it.

[bu6n]

You're right that replacing the components in the constructor of the DnD component make them non-changeable with the state. You can totally move this bit of code downwards to the render() method, see example here:
https://codesandbox.io/s/react-big-calendar-withdnd-working-f0mhc2?file=/src/withDragAndDropCustom.js

However, I have no idea if this has an impact on performance and rendering or something like this. If this answers your question, feel free to close the issue.

[iwollmann]

Any updates on this? I think the fix suggestion from @bu6n is valid. @cutterbl
This is a blocker for any custom components updates.

[iwollmann]

I think you can close this issue now @cutterbl.

[Poky85]

Guys @btalexraescu @iwollmann I don't think that the change in component merge introduced in this pull request is a good approach. It breaks custom components lifecycle and causes unnecessary remounts. See an issue with reproduction here.