This is a migrated thread and some comments may be shown as answers.

ES6 modules scrolling bug - showstopper!

11 Answers 41 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 08 Feb 2016, 12:30 AM

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

Sort by
0
Mike
Top achievements
Rank 1
answered on 08 Feb 2016, 04:38 AM

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.

0
Accepted
Petyo
Telerik team
answered on 08 Feb 2016, 04:51 PM
Hi,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 08 Feb 2016, 07:26 PM

@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.

0
Mike
Top achievements
Rank 1
answered on 08 Feb 2016, 11:41 PM

@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.

0
Petyo
Telerik team
answered on 10 Feb 2016, 05:22 PM
Hi Mike,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 11 Feb 2016, 12:32 AM

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!

 

 

0
Mike
Top achievements
Rank 1
answered on 11 Feb 2016, 02:47 AM

@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

 

 

0
Marcin
Top achievements
Rank 1
Veteran
answered on 11 Feb 2016, 08:23 AM

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

0
Mike
Top achievements
Rank 1
answered on 12 Feb 2016, 10:36 AM

This looks like the issue: 

https://github.com/telerik/kendo-ui-core/issues/1375

Definitely a bug in jQuery.
0
Petyo
Telerik team
answered on 15 Feb 2016, 04:04 PM
Hello Mike,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 15 Feb 2016, 08:55 PM

Thank you, Petyo.

Case closed, I think.

Tags
General Discussions
Asked by
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Petyo
Telerik team
Marcin
Top achievements
Rank 1
Veteran
Share this question
or