Popup from TabBar issues

edited January 2014 in Enyo 2.4
I modified TabPanels/TabBar/TabItem to support components in the tab (i.e., instead of text caption, pass in a components block). I put some text next to a MenuDecorator. The MenuDecorator contains an onyx.IconButton and a floating onyx.Popup. Clicking the icon should open up the popup. Everything works fine with showing /hiding popup, except when I resize the browser while the popup is showing. After resizing, the popup just stays there and there's nothing I can do to get rid of it (see screenshot below). If I click the IconButton again, another (normally working) popup appears (as long as I don't resize).

In inspecting the DOM tree, it appears that this "frozen" popup has no owner or parent. I've tried hiding / destroying it in various locations (including resizeHandler, flow/reflow) without success - in some scenarios, DOM inspector reports that is has property of "showing: false" even though it is clearly visible!

I also tried with Contextual Popup and exactly the same thing happens.

Any thoughts on how to debug / fix?

Thanks.
Cage

p.s. should onyx.ContextualPopup subkind from onyx.Popup instead of enyo.Popup (current code)? If I leave it as enyo.Popup, z-index is not calculated and it shows up beneath other elements. Works properly when changed to onyx.Popup.

opflo.uk.to/pics/screenshot.jpg

Comments

  • I'm trying to dig into this and approximated your situation with a ContextualPopup but wasn't able to reproduce the frozen popup issue yet. Do you have a snippet you can share? I'll continue to dig around a bit, but you mentioned that this was a floating popup - does the floatingLayer (direct child of body) appear and if so, what happens to it after resizing?
  • I'll try to get you a snippet but it's a bit hard to extract from my code. I may have forgotten to mention that the TabPanels/TabBar/TabItem controls are on an floating Popup themselves (i.e., Popup->TabPanels->Popup).

    Yes, the floatingLayer is there and the popup as well for the first time I click the IconButton. Then when I resize, the popup freezes, the owner/parent of popup become null. Next, if I click IconButton again, another popup shows up and the FloatingLayer now shows two of the popups (one for frozen, one for second, i presume).
  • Here is the fiddle. Note it happens whether the top is FittableRows or Popup...
    Click the green box to activate the Popup.

    http://jsfiddle.net/warpuser/hw785/
  • Thanks for the snippet, the specific nesting you used for the TabBar/TabItem controls was pretty helpful. It looks like the resizeHandler of TabBar is triggering a render call (via the reduce method in TabItem), which ultimately tears down its descendants, including the popup, and never re-generates it as the "floating" flag on the popup necessitates a "canGenerate:false" value, eventually preventing the display:none styling from actually being applied to hide the popup and making the decorator unaware that a popup was generated already (hence the duplicate popups).

    Will have to investigate the best way to fix this (handling floating controls differently in teardown or reworking the TabItem reduce method), but in the meantime (assuming you need the popup to be floating) you might need to override the reduce method and refrain from calling render and/or call reflow instead (would work especially if you are blasting away a lot of the standard tab item contents and don't care about the resizing): http://jsfiddle.net/hw785/1/.
  • @aarontam, I'd check with the Ares team on this -- they've been behind the TabBar control that's been developed for 2.3, so might have insight into why it's working that way.
  • Thanks @aarontam, that seems to work!
  • edited January 2014
    Sure thing - after speaking with the Ares team, we'll get this fixed: https://enyojs.atlassian.net/browse/ENYO-3696
Sign In or Register to comment.