render() appears to break scrolling in onyx.Picker

kenpaulkenpaul
in Enyo 2
I'm trying to develop a generic dropdown kind that allows dynamically reloading the list of options. See jsfiddle.net/kenpaul/YMUkN/ for an example, including a sample App that invokes it. As currently coded, the app generates 2 dropdowns, both of which scroll and select properly when loaded. Changing the selection in dropdown 1 causes a new list of options to be loaded in dropdown 2, at which point only the first few items show, and scrolling is apparently disabled. I've tried using render() or not in both reloadItems() and itemSelected() and haven't found a combination that works correctly both initially and after reloading. It looks like render() breaks the scrolling, but I hope that's wrong. Any help would be appreciated.
· Share on Twitter

Comments

  • unwiredbenunwiredben
    You hitting a bug that I thought we'd completely eliminated, but it looks like you found a new reproduction. Something about the multiple render calls is generating multiple copies of the popup in the DOM, and only one is associated with the scroller. I'll debug this a little more and see if its on our side or your side of the code.
    · Share on Twitter
  • unwiredbenunwiredben
    edited December 2012
    OK, the problem is that render() doesn't handle the case where children are rendered outside the normal DOM tree well. For the PickerDecorator, it's child, the Picker, is actually rendered into a separate FloatingLayer.

    The fix is in your code. In your reloadItems() call, instead of calling this.render(); call this.$.ddpick.render(); instead. This focuses the re-rendering on the list inside of the popup, rather than the decorator and all the things that own the layers above the list. This avoids triggering the bug. However, I'll file an issue to track this problem so your original code would work too.
    · Share on Twitter
  • kenpaulkenpaul
    Many thanks -- that works perfectly. And I'll watch for a fix for the original code.
    · Share on Twitter
  • TravisWebbUSATravisWebbUSA
    edited January 2013
    I ran into this as well, and I didn't see an existing issue for it. https://enyojs.atlassian.net/browse/ENYO-1902
    · Share on Twitter
  • unwiredbenunwiredben
    Travis, did you try the fix I suggested?
    · Share on Twitter
  • TravisWebbUSATravisWebbUSA
    edited January 2013
    Yes I've removed the symptom, but I don't consider anything fixed. This is still a bug that needs to be resolved, imo. Thanks for your help.
    · Share on Twitter
  • unwiredbenunwiredben
    OK, just wanted to make sure it wasn't a separate problem.
    · Share on Twitter
  • MarinaEarielMarinaEariel
    I have the same problem. Sadly, calling render for the Picker only it's not a fix for me, because when the Picker's parent gets a render() call and breaks the picker completely and no option is shown. Any other solution?
    · Share on Twitter
  • isgoodstuffisgoodstuff
    is this problem ever gonna get resolved. I'm been struggling with all kinds workarounds since day one of project :(
    · Share on Twitter
  • isgoodstuffisgoodstuff
    i actually have a SpecialPicker components which have my own comprises of onyx.PickerDecorator, onyx.PickerButton and onyx.Picker. I still have problems when the parent is rendered. Ben what is the best work around for this. Should I write a public function for kind:"SpecialPicker" that deal with this like forceRefresh()?
    · Share on Twitter
  • jcarlinjcarlin
    I'm in the same position as @isgoodstuff‌. Any suggestions?
    · Share on Twitter
  • theryanjduffytheryanjduffy
    edited December 2014
    I updated the original filter to work with the nightly build and I don't see any errors. Is your code similar to that, @jcarlin? What's unique in your scenario?

    http://jsfiddle.net/YMUkN/7/
    · Share on Twitter
Sign In or Register to comment.