search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.67k stars 12.19k forks source link

Drag operation not working with Telerik KendoUI #12386

Open Taygair opened 6 years ago

Taygair commented 6 years ago

Problem I have switched to Font Awesome 5.0.6 (SVG with JS as it was recommended) but the drag operation is not working when trying to drag ON the fa-icon itself (fa-sort in the sample case). It only works when dragging the DIV area around the fa-icon. Maybe some other GUI frameworks are affected too. I have created a working sample showing that misbehaviour. Furthermore I have attached the sample code (all CDN based). Doesn't work in Safari, Chrome and Firefox (latest versions). => I have added two problems in my code. This problem is covered in the upper area of the HTML (Drag demo). I will create another issue for the other problem. This problem doesn't exist with your CSS Webfonts solution. Expected result: Drag operation works on DIV around the fa-icon as well on the fa-icon itself.

What version and implementation are you using?

Version: 5.0.6 Browser and version: All the latest versions (Safari, FF, Chrome) on Mac

Reproducible test case

You can try it out right away here: http://geoneer.me/html/afproblem.html

tagliala commented 6 years ago

Hi!

Thanks for reporting this issue properly

Please split the second problem in a new issue because they seem unrelated

Editable fiddle: https://jsfiddle.net/tagliala/hdgn4uny/

Taygair commented 6 years ago

I do everything to make you happy: https://github.com/FortAwesome/Font-Awesome/issues/12387

tagliala commented 6 years ago

I can confirm there is a compatibility issue with the library you are using and the SVG framework.

Anyway, attaching events to the icon itself is not recommended on the SVG framework.

Please take another look at the documentation: https://fontawesome.com/how-to-use/svg-with-js#with-jquery

I think the library is initializing the event at the wrong moment

@robmadole what are your thought on this?

Taygair commented 6 years ago

I can confirm there is a compatibility issue with the library you are using and the SVG framework.

Incompatibility to what library version? JQuery or KendoUI?

Anyway, attaching events to the icon itself is not recommended on the SVG framework.

What? Are you kidding?I am not allowed to use the FA icons as buttons by not adding events on it? Why is that not written in the "Get started" or "Do's and Dont's?

Please take another look at the documentation...

I will in hope not to get in deeper trouble/work as I already am while switching to FA 5.0

I think the library is initializing the event at the wrong moment

Which library? The events I'm using (will be attached AFTER the homepage is loaded/rendered ($.ready...) My assumption so far was that the fa-icon inside the div overlaps the DIV itself, so the event on the DIV is not firing (even though the click event works).

Taygair commented 6 years ago

Just went through the section you mentioned. I was not aware of all this and what I all have to consider just to display some icons. I have tried this one but with no positive result:

Now knowing what I probably additionally have all to consider using Font Awesome JS with JQuery I'm closing to switch back to Webfonts CSS or any other working solution. There are some other not so nice issues I have found using Font Awesome JS:

This is all a downer and probably will cost me some more days to switch now to any proper CSS solution. My opinion so far: Font Awesome JS offers some powerful features but this to a too high price considering the mentioned problems (so far).

tagliala commented 6 years ago

Incompatibility to what library version? JQuery or KendoUI?

KendoUI's drag library

What? Are you kidding?I am not allowed to use the FA icons as buttons by not adding events on it?

Please take another look at our Code of Conduct. Let's use a polite and respectful language.

The SVG framework is going to replace <i> tags with <svg> in the DOM.

If events are not idempotent, not properly attached or attached at the wrong moment, they will not work.

In fact, you did attach click events to the icon itself and they worked as expected.

In this example, you can see an idempotent click event attached to an SVG icon, before document.ready has been fired and it works as expected: https://jsfiddle.net/tagliala/vLae8ted/55/

Why is that not written in the "Get started" or "Do's and Dont's?

A Do's and Dont's table / SVG vs CSS is a good idea.

Which library?

KendoUI. But I mean that KendoUI is running the event at the wrong moment, I don't mean that it is KendoUI's fault. I would like to know if there is another way of attaching that event, so please wait for Rob's feedback on this.

This is all a downer and probably will cost me some more days to switch now to any proper CSS solution. My opinion so far: Font Awesome JS offers some powerful features but this to a too high price considering the mentioned problems (so far).

There are use cases in which the SVG Framework is not the best option, we are trying to do our best to provide people the right choice for their needs.

Taygair commented 6 years ago

Dear tagliala Thank you very much for you polite help! I'm so happy with your provided information that won't help but explains all the behaviours. I can replace a library for just displaying some simple SVGs but I can't remove Teleriks framework doing just everything in the project. And furthermore to keep even more polite based on your Code of Conduct: I'm so happy to have spent 60 bugs, several days of work including this wekend (to find out it won't work) and to tell my boss tomorrow it was the wrong decision to choose this option. I have no reason to be a bit upset about that all! I'm so happy about it and I take it to all my fault to follow your recommendations (using your JS library). I had the choice! I'm so sorry to run into these problems! So feel free to close all my bugs (including this) and I'm so sorry to waste your time! I feel so bad now! Please apologize, it is not your fault, just mine, but I will look for another solution. Thank you so much! Kind Regards

robmadole commented 6 years ago

@Taygair it doesn't sound like SVG with JS is going to work for your situation. Switching to Web Fonts with CSS is going to give you a much better experience. Eventing directly on any SVG icon is going to be problematic since FA is using DOMContentLoaded, requestAnimationFrame, and MutationObservers. Those are all very asynchronous in nature and hard to predict timing.

We need to improve the documentation on the site and I'm sorry that you've had so much trouble with it. However, your conduct is a problem for our community. Please send a message to hello@fontawesome.com (attention Rob) to discuss the status of your account.