DnD: dragging won't start on first attempt (when no events are visible when initialized?)

Do you want to request a feature or report a bug?

bug

What’s the current behavior?

This took me quite some time to simulate, so bear with my explanation.

Problem is, that DnD at some cases seems to be not fully initialized and then is not working on each odd attempt. Problem can be easily seen here: https://codesandbox.io/s/640nmy650r

• If I set defaultDate to be at the same week as events, DnD is working.
• If I set defaultDate to start at some other week without events, then after navigation via Previous/Next controls to events, DnD won’t start on each odd attempt. Every second attempt works.

In depth in first attempt I saw that drag is not started due to beforeSelect check, where state accessible via dragAndDropAction is not yet filled. Maybe issue with event listeners?

I had this problem starting in WEEK and DAY view (maybe it’s also issue with MONTH). !Beware: hot reload causes correct re-initialization, so you need to refresh whole page before each try.

Problem is not connected to OS or browser.

What’s the expected behavior?

DnD works no matter what defaultDate and view is used.

[bminer]

I seem to be able to confirm this bug. Here’s how:

• Use onSelectSlot to create a new event and update the events state
• Ensure that events does not contain events that will render on initial load

If the events array has one or more items in it that will be rendered, everything works fine; otherwise, the move/resize events only work every other time, and other strange behavior occurs also.

Consider the following code:

import React, { Component } from "react";
import Calendar from "react-big-calendar";
import moment from "moment";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";

import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = Calendar.momentLocalizer(moment);

const DnDCalendar = withDragAndDrop(Calendar);

class App extends Component {
  state = {
    events: [
      {
        start: new Date("1970-01-01"),
        end: new Date("1970-01-01 2:00 PM"),
        title: "Some title"
      }
    ]
  };

  onSelectSlot = ({action, start, end }) => {
    this.setState(state => {
      const events = [...state.events, {
        start, end,
        title: "New Event"
      }]
      return { events };
    });
  }

  onEventResize = ({ event, start, end, allDay }) => {
    this.setState(state => {
      const events = [...state.events]
      const i = events.indexOf(event)
      events[i] = Object.assign({}, state.events[i], {start, end})
      return { events };
    });
  };

  onEventDrop = ({ event, start, end, allDay }) => {
    this.setState(state => {
      const events = [...state.events]
      const i = events.indexOf(event)
      events[i] = Object.assign({}, state.events[i], {start, end})
      return { events };
    });
  };

  render() {
    return (
      <div className="App">
        <DnDCalendar
          localizer={localizer}
          defaultDate={new Date()}
          defaultView="week"
          events={this.state.events}
          onSelectSlot={this.onSelectSlot}
          onEventDrop={this.onEventDrop}
          onEventResize={this.onEventResize}
          selectable
          resizable
          style={{ height: "100vh" }}
        />
      </div>
    );
  }
}

export default App;

In the above example, the drag and drop functionality will not work properly for newly created events. However, if I simply change the initial state of events to a Date range that will be rendered initially, everything works fine:

  state = {
    events: [
      {
        start: new Date(),
        end: new Date(),
        title: "Some title"
      }
    ]
  };

So, with the above change, everything works normally again.

[kkesley]

until the official fix is coming, I’m using this workaround

eventPropGetter={event => {
        if (event.hide) {
          return { style: { display: "none" } };
        }
}}
events={[
        { start: new Date(), end: new Date(), title: "", hide: true },
        ...events
 ]}

Do you guys have any feedback? Can I use this right now?