Draggable: HTML click event not triggering onClick handler

[luke_nukem_3d]

Hello!

 

We recently upgraded to the latest GSAP (jumping a major version) and have got a problem with some tests failing since. 

 

During some of our automated tests we need to be able to click on draggables, and have the `onClick` action fire for certain behaviour to happen which can then be asserted against. Unfortunately, the Draggable's `onClick` listener does not fire upon a click event.

 

I have attached a codepen which I hope shows the example clearly.

 

It sets up a Draggable with an `onClick` listener which should turn the square blue when it is clicked. You can try this manually to check the logic works.

 

It also has some code which just fires a click event on the draggable element. You can see that this does not turn the square blue.

 

I'm certain there is a reason (potentially to do with it differentiating between clicks and drags) that this doesn't work, but wondered 

a) If it should work

b) If not, whether there is a reasonable workaround we could use for our automated tests to trigger clicks on Draggable elements.

 

I have also tried with different more granular events i.e mousedown, mouseup etc. but still no joy.

 

Thanks in advance for any help you might be able to offer, and let me know if anything isn't clear so I can provide better examples.

 

Luke

See the Pen gOwLzBz by lukeekulluke (@lukeekulluke) on CodePen

[ZachSaucier]

Hey Luke. This was asked about before here:

As far as I know, the answer is the same.

 

I am not really understanding why one would need a test for this sort of thing in the first place. But an easy work around is to apply a one-time click event listener:

See the Pen bGwBmzV?editors=0010 by GreenSock (@GreenSock) on CodePen

[luke_nukem_3d]

Hey Zach, 

 

Thanks for getting back to me.

 

I would have thought the use case is a pretty common one, but maybe not. We run acceptance (end to end) tests on our apps. In this level of testing, we boot the whole application for each test and then interact with the app, as a user would, so that we can make certain assertions against those actions.

 

A vastly over simplified example could be the code above i.e A user loads the page, they click on the square, this turns the square blue.

 

To be clear, I'm not looking to trigger the click event programatically from inside the application logic, only the tests.

 

We use Draggable quite extensively and so a lot of our user journeys might include clicking on a draggable, which under normal circumstances would trigger something happening. If you start reaching into the code to call a particular function at that point, it starts making the tests less meaningful. Equally if I'm to attach a listener during the test, then were another developer to remove the onClick handler in the actual code, we would never know from the tests that the functionality was broken, because we're setting the test up to succeed whatever happens.

 

I don't mind digging into the code to try and figure out why, but was wondering if any of those more in the know might be able to shed a little light as to why the Draggable onClick() doesn't fire when triggering a click event on the draggable element, it felt intuitive that it would, but I guess there must be a good reason that i'm missing. Knowing this might help me figure out the best workaround for our use case.

 

Thanks again for any help or guidance you can offer, really appreciated.

[GreenSock]

Nice to hear that you're making such extensive use of Draggable. 

 

The reason it doesn't fire on code-based events like that is because it seemed out of its jurisdiction, like Draggable was designed for interactive Dragging and not monitoring what goes on with that element outside of Draggable's direct control. However, I think I've figured out a way to accommodate your request and I'm hopeful the new behavior won't catch other users off-guard (I kinda doubt it will). You can preview the upcoming release at https://assets.codepen.io/16327/Draggable3.min.js

 

Better? 

[luke_nukem_3d]

Hey Jack,

 

Tried with the code above and works like a dream ⭐ 😃

 

Thanks so much for listening to the use case and providing such a quick and positive response! I hope it won't catch other users off guard as it seems more intuitive to me, but I understand why you didn't have it setup that way before.

 

Do you know when the previewed version will be released/come available through NPM? No rush, but just so I know roughly when to check back in so I can upgrade and complete this bit of work.

 

Can I also just say thank you for all your hard work in making such great libraries, they really are brilliantly done with great API's and with such good browser support too. No mean feat and you guys have nailed it! Not to mention the responsive support you offer through these forums, it really is a rare thing.

[GreenSock]

7 hours ago, luke_nukem_3d said:

Do you know when the previewed version will be released/come available through NPM? No rush, but just so I know roughly when to check back in so I can upgrade and complete this bit of work.

 

I can't give you an exact date, but hopefully within the next 2 weeks. 

 

7 hours ago, luke_nukem_3d said:

Can I also just say thank you for all your hard work in making such great libraries, they really are brilliantly done with great API's and with such good browser support too. No mean feat and you guys have nailed it! Not to mention the responsive support you offer through these forums, it really is a rare thing.

I sure appreciate the kind words. We've put a lot of work into smoothing out cross-browser inconsistencies and crafting an API that's rich and intuitive but hopefully not overwhelming. It's always a tough balancing act (for me at least), so it's nice to hear when someone notices the efforts 

 

Happy tweening/dragging!

[ewebdesign]

Hello, fellow license holder here.  Is Draggable able to be a full-on replacement for say.. React-DND?

[GreenSock]

Howdy, @ewebdesign. I have never heard of React-DND so I couldn't tell you how it compares. Sorry. 

[ewebdesign]

Its ReactJS's most robust DND library.  https://react-dnd.github.io/react-dnd/about. I have a complex application that likely ideally use a DND solution that covers most use-cases (another library only did veritcal OR horizontal reordering, not both at same time).  Would you say Draggable is a 'robust' DND solution or niche?

[ZachSaucier]

Draggable is perfectly suitable for creating those types of animations and reordering, sure. But GSAP's Draggable doesn't have built in support for reordering things in the DOM. With that being said, it's pretty simple to add (this uses the old GSAP version but the concept is the same):

 

[ewebdesign]

Thanks for this update.  Would it be fair to say that a lack of built-in support for Reordering things in the DOM is the main shortcoming of Draggable when compared with other DND solutions?

[ZachSaucier]

I wouldn't say that is a shortcoming of GSAP's Draggable, no. There are different tools for different purposes. As covered in the links above, sorting is pretty trivial to do with GSAP's Draggable. If you need that functionality then you can add it. By not including it by default GSAP's Draggable makes its file size smaller for the majority of use cases (where sorting is not necessary).

[ewebdesign]

Shortcoming was not the correct word, I'm extremely satisfied with GSAP for everything else, just looking for reassurance it can stand up against other premiere DND libraries reasonably well, as ideally i'd rather just use Draggable, than react-dnd or something else.   

I have a unique skill for going down the 'rabbit-hole' of other packages with a use-case in mind, only to hit a dead-end deal breaker wall 20-30 hours of learning in.. 

 

Some examples would be .. 

https://github.com/STRML/react-grid-layout.  

http://dsmorse.github.io/gridster.js/

https://packery.metafizzy.co/

 

All 3 didn't work out, but i'm hopeful a more efficient primitive like draggable will make some of the otherwise challenging problems easy, but not be too opinionated and heavy, paving the way for a lean, custom solution. 

 

My initial use-case is Trello DND functionality (vert/horizontal at once), but eventually i'll look to do more complex grid management quite similarly to this example you provided.  

See the Pen RNLdpz by osublake (@osublake) on CodePen

 

Thank you for your help!

[luke_nukem_3d]

I'd say Draggable (and the rest of the GSAP libraries) give you the tools to do pretty much anything, it's highly flexible and performant (plus really good browser support). If you just want to do something simple like a sortable list reordering, there might be better options out there which will quickly satisfy your need without you having to write much logic, but as soon as you want to 'go down the rabbit hole' and the use cases become more complex, GSAP gives you the tools to make it happen.