Ripple doesn't support FontAwesome SVG Kit for Button/Menu/etc

[TheWrightDev]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
If using a FontAwesome Pro SVG kit, the getInk() method explodes when attempting to search for the p-ink class.

zone-evergreen.js:178 Uncaught TypeError: this.el.nativeElement.children[i].className.indexOf is not a function
    at Ripple.getInk (primeng-ripple.js:43)
    at Ripple.onMouseDown (primeng-ripple.js:24)
    at ZoneDelegate.invokeTask (zone-evergreen.js:402)
    at Zone.runTask (zone-evergreen.js:174)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:483)
    at invokeTask (zone-evergreen.js:1596)
    at HTMLAnchorElement.globalZoneAwareCallback (zone-evergreen.js:1622)

primeng/src/app/components/ripple/ripple.ts

Line 55 in c972065

if (this.el.nativeElement.children[i].className.indexOf('p-ink') !== -1) {

The SVG kit replaces the HTML element with the class names with a new svg element. And since the className property on an SVG element has a different definition from the className property of an HTML element, it pops when trying to find the class. So it can't just blindly be jumping on indexOf.

Expected behavior
Would not break app.
Could easily be fixed by checking if indexOf is a function before hand on the same line: (this.el.nativeElement.children[i].className.indexOf && ...), or could even look for an svg explicitly (!(this.el.nativeElement.children[i] instanceof SVGElement) && ...), or however you would care to stop it.

Minimal reproduction of the problem with instructions
If you don't want to mess around with font awesome, just swap the icon span with an svg on a ripple supported component like a button or a menu item. Otherwise, add a FontAwesome Pro kit using SVGs, add an icon to a button or menu item and watch the show.

What is the motivation / use case for changing the behavior?
So that ripple can be used while using one of the largest Font libraries out there.

Please tell us about your environment:

• Angular version: 11.1.0

• PrimeNG version: 11.2.0

• Browser: all

• Language: all

[PhilippRoessner]

We have the menubar - control in our app and this error appears only when the current route is a nested route. Coming from any other route, the same menu item - routing works as expected. I am not sure if this error is causing it but the navigation breaks when I see this error in the console.

[PhilippRoessner]

Okay I found it... we used one font-awesome icon inside of a MenuItem - definition for a menubar for primeng. This breaks the whole navigation, I was searching for hours... @TheWrightDev thx for your description, probably saved me days...

[alekstrust]

Found this issue today while trying to use an SVG icon inside a pRipple.

Wrapping the SVG with an unnecessary div fixes the issue.

[cetincakiroglu]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,