Tabs plugin uses $ instead of jQuery, hence conflicts with wordpress

[jashwant]

File: foundation.tabs.js Line 20:

    this.options = $.extend({}, Tabs.defaults, this.$element.data(), options);

returns error

Uncaught TypeError: Cannot read property 'extend' of undefined

Possible Issue:

Wordpress expects your jQuery code to be added in noConflict mode. But, plugin is not following it.

Possible solution:

Plugin should use jQuery instead of $ or wrap plugin code inside anonymous function with jQuery passed as $.

Further Info:

I am using Tab plugin alone and hence only included foundation.core.js, foundation.util.keyboard.js and foundation.util.timerAndImageLoader.js plugin before it and using my custom gulp code to process it.

[jashwant]

Also,

Line 51:

          linkId = $link[0].id ? $link[0].id : `hash${-label}`,

I do not have much ES6 experience, but it looks like label is undefined

[shoaibik]

It is already passing the $ in first line !function($, Foundation) { , so it might be some other issue. I could not find the hash${-label} in the file, it is hash + '-label'

[jashwant]

@shoaibik , gakimball pushed those changes in development branch, after I mentioned the bug. It was not there initially.

[gakimball]

The plugin is indeed inside an IIFE so I'm not sure what the issue is.

I'm also not able to recreate this with a minimal example. Basic tab HTML, jQuery.noConflict() called, and the plugin works fine: http://codepen.io/anon/pen/RrdZqr

[gakimball]

Did one more test with Foundation 6.2, which is out this week, and calling jQuery.noConflict() before jQuery(document).foundation() doesn't break tabs.

[jashwant]

I can confirm that issues mentioned above, have been fixed in 6.2-stable.

Thanks @gakimball .

[davePlug]

in 6.3.0 seems like the problem is back