ES6 modules scrolling bug - showstopper!

12 posts, 1 answers
  1. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 07 Feb Link to this post

    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!!!

     

     

     

     

  2. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 07 Feb in reply to Mike Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 Feb Link to this post

    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!
     
  5. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 08 Feb in reply to Petyo Link to this post

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

  6. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 08 Feb in reply to Petyo Link to this post

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

  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Feb Link to this post

    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!
     
  8. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 10 Feb in reply to Petyo Link to this post

    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!

     

     

  9. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 10 Feb in reply to Petyo Link to this post

    @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

     

     

  10. Marcin
    Marcin avatar
    165 posts
    Member since:
    Jan 2011

    Posted 11 Feb Link to this post

    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

  11. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 12 Feb Link to this post

    This looks like the issue: 

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

    Definitely a bug in jQuery.
  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 15 Feb Link to this post

    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!
     
  13. Mike
    Mike avatar
    18 posts
    Member since:
    Dec 2015

    Posted 15 Feb in reply to Petyo Link to this post

    Thank you, Petyo.

    Case closed, I think.

Back to Top
Kendo UI is VS 2017 Ready