When using KendoUI widgets with ES6 modules, those widgets' pop-up elements become detached from their respective controls as you scroll down the web page, making them pretty well useless. The issue happens on IE 11 and Firefox, but not Chrome.
I'm using Babel to transpile the ES6 code and modules into ES5-compatible code, and Webpack for my module loader. I've tried to follow the Telerik documentation athttp://docs.telerik.com/kendo-ui/third-party/webpack, although that uses CommonJS style requires rather than ES6/Babel. Is that the problem, maybe?
I thought, at first, that it might be a problem with Webpack, so I tested it a second time with SystemJS, again following theTelerik documentation athttp://docs.telerik.com/kendo-ui/third-party/systemjs, although again, that uses CommonJS style requires rather than ES6/Babel.
I've set up Github repositories that demonstrate the problem here:
https://github.com/brownieboy/kendo-webpack-bugtest
https://github.com/brownieboy/kendo-systemjs
Follow the Readme instructions to install (requires Node/npm). The readme files for both repositories show screenshots of the problem. For convenience, the examples in the two repositories use the open source version of Kendo, but the same problem occurs in the Pro version. The examples use the Kendo DatePicker control, but it happens in other controls too, such as the Kendo DropDown control, and the filter boxes that you get at the top of the Kend Grid.
If I can't find a solution to this, then I may have to rewrite my current project to abandon the use of ES6 and modules altogether, and go back to dumb script tags with everything in global scope. Needless to say, that will not be a happy time for me, so any assistance will be gratefully received!!!
11 Answers, 1 is accepted
Rank 1
I've just quickly updated my SystemJS repository (https://github.com/brownieboy/kendo-systemjs) to add a version where I've removed ES6 and Babel, and replaced them with CommonJS require statements. (To see this version you need to git checkout the commonjs-version branch.)
The scrolling bug is still happening. So whatever's causing it, it's not Babel.
Kendo UI does not ship NPM modules, yet (we plan to fix this, though). Your project is using a "fake" package published by a developer who is not related to Telerik. The package itself does not seem to be maintained, too.
Regards,
Petyo
Telerik
Rank 1
@Petyo,
As I said in my post, I get the same problems in the Pro version, which is where I first noticed it. I will modify my repositories accordingly.
Rank 1
@Petyo,
As promised, I've now updated both of my repositories with instructions on how to use the Professional version of the KendoUI rather than that unofficial npm version.
The problem is still happening.
Please check the instructions in the readme files for each repository, because they are different. For the Webpack test, I had to use a 2015 version of Kendo, since the 2016 versions contain breaking changes that render them incompatible with Webpack, see http://www.telerik.com/forums/new-amd-definitions-in-v2016-1-112-are-incompatible-with-webpack.
I'm going to report this as a bug too.
I think that you may be on to something here. In general, All Kendo UI scripts are using a 'local' jquery instance variable, because we subclass jQuery for internal purposes. Second, I don't think that the problem is somehow caused by the Kendo UI pro scripts; however, let's not rule that out yet.
While trying to simplify the problem further, I took your setup and translated it to this. The SystemJS setup is taken from our documentation, and the scripts in the kendo directory are built from the core repo. Essentially, they should be identical to what we ship in the `src/js` directory of Kendo UI Pro. From what I see, the scrolling problem is not reproducible, at least not in Firefox. I will do an additional check in in IE tomorrow, too and get back to you.
As per the webpack issue you mention - it should be addressed in the subsequent releases we have published, like my comment in the thread suggests. Maybe I am missing something, though. May you please clarify a bit?
Regards,
Petyo
Telerik
Rank 1
Thank you, Petyo. Good work. I think we're making some progress now.
The system.js problem seems to be tied to version of jQuery I was using, which was 2.2.0.
So with this line in your index.html config, it works:
jquery: '//code.jquery.com/jquery-2.1.4.min.js'
But change it to:
jquery: '//code.jquery.com/jquery-2.2.0.min.js'
and you'll see the bug in FF and IE. That's what I'm seeing, anyway!
Rank 1
@Petyo,
Just to confirm that downgrading jQuery from 2.2.0 to 2.1.4 has also fixed this bug when using Webpack. In both cases I just issued the following commands to have npm do the downgrade:
npm remove --save jquery
npm install jquery@2.1.4 --save
Rank 1
Veteran
I also notice there is some braking change in jQuery itself, The positioning (related to scrolling) of windows is broken on latest version of jQuery, but works, one version below e.g.:
All works on version 1.11.3 but not on 1.12
It works on 2.1.4 and not on 2.2.0
Rank 1
This looks like the issue:
https://github.com/telerik/kendo-ui-core/issues/1375
Definitely a bug in jQuery.Yes, this is something that I have overlooked as a possibility. The 2.2.0 version of jQuery broke a lot of things in Kendo UI. I would definitely recommend staying out of it for now.
Regards,
Petyo
Telerik
Rank 1
Thank you, Petyo.
Case closed, I think.