Event menu does not open when clicking on an event

[eeefg650]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/xenodochial-currying-dxl85n?file=%2Fsrc%2FApp.js%3A19%2C16

Bug description

When trying to click an event, the menu doesn't open as expected,
but if I don't use withDragAndDrop,
then the problem goes away.

Or if i removed the "props.event.children" in EventComponent also the problem goes away.
You can examine the problem in the link I attached.

NOTE:
I lowered to version 0.40.8 and it works fine
but it doesn't help me because it's too old a version and breaks other things

Expected Behavior

No response

Actual Behavior

The menu will show up as expected with - "WithDragAndDrop"

react-big-calendar version

1.5.2

React version

18.0.2

Platform/Target and Browser Versions

chrome 107.0.5304.107

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

[cutterbl]

What is props.event.children? You have a children key on your event?

The EventWrapper component get's the props of either a TimeGridEvent or an EventCell. It's (the EventWrapper's) children are passed as a prop. If you wanted a completely custom layout, you would ignore the passed children prop all together.

Sometimes it's good to check out which props are passed in which instance. Initially setting up a dummy layout, for review, is sometimes smart.

function MyCustomEventWrapper(props) {
  console.log('[MyCustomEventWrapper]', props);
  return (<div>Temporary Dummy Wrapper</div>);
}

[JensDebergh]

I can confirm this is a bug.

Version: 1.16.0

This is my simple event wrapper which I use for styling purposes based on the type of event:

import * as React from 'react'
import { EventWrapperProps } from 'react-big-calendar'
import { CalendarViewEvent } from '../../types'

type IProps = EventWrapperProps<CalendarViewEvent> & { children?: React.ReactNode }

const CalendarEventWrapper = (props: IProps) => {
  const { event } = props
  return (
    <div className={`event-${event.type} ${event.disabled ? 'disabled' : ''}`}>{props.children}</div>
  )
}

export default CalendarEventWrapper

I recently introduced DnD functionality in my app. Everything seems to be working on initial glance, clicks on week view works. The month view on the other hand is swallowing the click events for some reason due to the wrapper for DnD.

If I revert the DnD functionality of react-big-calendar with the exact same code, click events are handled properly on all views.

Potential solution:

The EventWrapper for DnD is way more complex then it is for non DnD support. It needs DnD context as a result. Overriding this property when using the DnD component currently is not feasible.

Either the library needs to expose it as a component for which we can then use to create our own component (with the required DnD context)

OR

The wrapper needs to be worked on to allow a proper way of adding a wrapper around our component. In this case all the DnD logic needs to be extracted to a separate component.

If all you need is to style the existing content of the event you can use the eventPropGetter property to add classes to the existing event.

I moved my stuff from the wrapper component to this method to add basic styling:

eventPropGetter(event: CalendarViewEvent, start: Date, end: Date, isSelected: boolean): { className?: string | undefined; style?: React.CSSProperties } {
    return {
      className: `event-${event.type} ${event.disabled ? 'disabled' : ''}`
    }
  }