React-big-calendar: Start dragging and resizing in the DnD calendar immediately if the event is already selected

[TomasHubelbauer]

Do you want to request a _feature_ or report a _bug_?

I guess a feature, I view this as a bug, but it's really anyone's guess.

What's the current behavior?

When using the DnD calendar, for an event to start being dragged or resized when the user drags it with the mouse or drags on its resize handles, the event has to be clicked first. So every time the user wants to drag or resize, they have to go: click, drag/resize, click, drag/resize. This is pretty bad in terms of UX as far as I am concerned, especially because the resize handles show up on hover, not on focus. I assumed the event will start being actioned immediately if it is selected, went to some lengths trying to preselect an event on hover in #538 only to find the event doesn't care at all if its selected or not, DnD will take two clicks no matter what.

What's the expected behavior?

I would like to suggest that a selected event starts being dragged/resized immediately and not after a focusing click.

[TomasHubelbauer]

I think @bs85 is the person to ping here as you seem to be the developer on the drag and drop addon.

[TomasHubelbauer]

Okay, this is hella confusing. On the demo page at http://intljusticemission.github.io/react-big-calendar/examples/index.html#dnd, and even locally when checking out the project and running npm run examples, the DnD demo does not need the click-then-action dance. No matter what item was last selected, you can just grab any item and drag it or resize it.

But when using RBC in my own project, even though the use is completely identical to the DnD demo code, I do have to first click and only then can I action a slot. I used to think I had to first click to select and then action unless previously selected, but turns out the behavior actually is it will immediately action on every other click.

I figured it may be that this was fixed, just not released, but I was not able to build the project. I am using Windows so I fixed a few things to work with it and I was able to run npm run build, but I am not sure how to get to a state where I can just npm install ../react-big-calendar in my other project to be able to run against my local fork. When I try to do that with successful npm run build, I am greeted with errors like Can't resolve BakcgroundWrapper.js in ../react-big-calendar/dist, which makes sense, because the files are inlib`.

I am not sure how to proceed from here, the problem is not present in this repository or on the demo site, but I can reliably reproduce it in any app which uses RBC at its latest version. I am hoping I could get some support on this issue as it makes the DnD experience significantly unpleasant.

[TomasHubelbauer]

This is my repro of the problem I describe above:

https://github.com/TomasHubelbauer/rbc-dnd-auto-select

Just npm install and npm start.

[xtursky]

Not sure, but maybe it's same issue as I had in #1105

[TomasHubelbauer]

This issues does indeed sound very similar to #1105. I will wait until yours has been resolved and see if that fix makes my repro work as well, if yes, I will close my issue.

[tuancaraballo]

I'm running into the same issue, any updates on this?

[TomasHubelbauer]

I haven't tried this because in my project the drag requirement was dropped. I think this project has been abandoned so I think you're best off debugging this for yourself and PR-ing just in case, if this is a blocker for you and you're on a deadline.

[tuancaraballo]

Hey @TomasHubelbauer thank you for the quick reply. I have no deadline pressure, it's just a side project, but I would really like to have this feature before I present it. I will tinker with it for a bit to see if I can fix it. I'm curious to know what you ended up implementing to change the event time range? Did you use a modal?

[TomasHubelbauer]

I am not sure actually, unfortunately. I did a handful of experiments with RBC:
https://github.com/TomasHubelbauer?utf8=%E2%9C%93&tab=repositories&q=rbc&type=&language=

I think either https://github.com/TomasHubelbauer/rbc-resizable-event-wrapper or https://github.com/TomasHubelbauer/rbc-dnd-auto-select may be of interest to you, but I am not sure if they contain a solution, it's been a while since I focused on RBC and I mostly worked around all its weirdness by wrapping it in my own React component and forgot the specifics :-/.

[tuancaraballo]

@TomasHubelbauer thank you for sharing! I'm looking at it rw. Love you sense of humor, lol

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[FelipeGaraycochea]

Hello, I want to know if the problem can be solved in any way

[xtursky]

Not sure, but in my case this workaround with initial data (in initial view) helped me last time I was working with RBC.
https://github.com/jquense/react-big-calendar/issues/1105#issuecomment-459563886

[FelipeGaraycochea]

Not sure, but in my case this workaround with initial data (in initial view) helped me last time I was working with RBC.
#1105 (comment)

that's the workaround that i implemented, but is weird that the in the DnD example page works very fine. Maybe the creators use the same workaround in that example. I dont know. Thanks for the reply.