GSAP Draggable Inside a React Portal - Can't Get To Work

[danboyle8637]

I used codesandbox because I'm a little more familiar with this than codepen... at least when it comes to using React in it.

 

Here is the URL to my little project:

https://codesandbox.io/embed/l53n2yr619?fontsize=14

 

In the file: DraggableSchedule.js

 

I created a Draggable container which holds three cards and they are flexed out so they are side by side.

 

In Drawer.js I'm wrapping my DraggableSchedule in the actual drawer (portal) that will come from the right of the screen.

 

In DrawerPortal.js I create my portal.

 

And then in MenuSection.js I have the button that toggles the side menu open and close. The Drawer.js is wrapped in the Portal. 

 

This is a recreate from an app I building now. And no matter what I do, I can't get my Draggable container in the portal to respond to drags... clicks... anything.

 

To get the bounds, I think I need to get the Drawer.js element... the drawer div that slides out.

 

But I don't know how to do that and pass it down to DraggableSchedule.js where I can set the bounds and then calculate the width so I can configure my snap points.

 

I've been racking my brain for two days now and have made no progress. 

 

I can get my Draggable plugin to work perfectly in my app as long as it's not in a portal.

 

Any help or ideas would be great. Thanks so much!

See the Pen by embed (@embed) on CodePen

[Rodrigo]

Allright, this was not a fun morning activity

 

We're meeting once again with this issue:

 

https://github.com/facebook/react/issues/13654

 

That issue stems from this particular thread in the forums:

 

Now as you can see in this comment by Dan Abramov (from the React team) that this behaviour was change EXCEPT for portals:

 

https://github.com/facebook/react/issues/13654#issuecomment-435150900

 

Adding this makes it work on your case:

 

Draggable.create(this.dragSchedule, {
  type: "x",
  edgeResistance: 0.75,
  lockAxis: true,
  allowNativeTouchScrolling: false,
  dragResistance: 0.3,
  throwProps: true,
  snap: this.snapX,
  onClick: this.wasClicked,
  zIndexBoost: true,
  autoScroll: 1.5,
  dragClickables: false,
  bounds: window
});

 

Why you may ask, because now the portal has the no-op handler associated to the click event so we need to counter that by doing the opposite of the previous behaviour:

 

 

 

Still I'll summon our beloved master @GreenSock in order to see if He has something to add to this, but I believe you landed in an edge use case.

 

Anyway, setting the dragClickables to false seems to fix the issue.

 

Happy tweening!!

[danboyle8637]

@Rodrigo Wow thank you so much. I appreciate your help so much. 

 

When I read it, I remembered reading about the dragClickables at one point in time. But in my research over the last few days, it never popped back up. 

 

I will look into this more... mainly in the dev tools which I need to learn better. 

 

But thank you again for helping fix this issue and hopefully portals will change soon. 

 

I am still on React 16.7 something and not the newest version of 16.8 something. Maybe it has been fixed. I'll test it out on my next site which I'll be starting this coming weekend. I'll report back because this is functionality that I think makes the most sense for mobile devices.

 

Thank you again!

[GreenSock]

FYI, there was a regression in Draggable since GSAP 2.1 that caused dragClickables:true not to work properly. I'm so sorry about that! It was a one-character typo on my part. That's resolved in GSAP 2.1.2 (just released). 

[danboyle8637]

Thanks! I'll have to update.