Context menu flyout WinJS.UI.Menu in settings flyout?


  • I would like to display a flyout menu when the user clicks the version number in my apps "about" settings pane. However it seems that since the settings pane is already a flyout itself (the appbar clickeater is active, set to "display:block") and displaying a WinJS.UI.Menu will activate the flyout eater (for the displayed menu) so that clicks to the menu are catched by the eaters before they reach the menu click handler.

    Is there a way around this limitation? Can WinJS.UI.Menu not be displayed in the settings pane?

    Thursday, November 22, 2012 3:11 PM

All replies

  • Can you share the code, with which you are trying to achieve this....

    Arindam Basu

    Sunday, November 25, 2012 2:15 PM
  • Unfortunately no, I have already removed the code from the codebase.

    But it is very simple to reproduce. In any settings html file have a WinJS.UI.Menu control and have it show with a call to <span onclick="getElementById('menu').winControl.show();">Click me</span>

    It will show, but its not clickable, since a clickeater is already spanned all across the screen (to dismiss the settings flyout I guess)

    Monday, November 26, 2012 4:49 PM
  • If I understood the context correctly, you want to trigger another flyout from settings flyout.

    In that case in my understanding the answer is Yes.

    The animation events will be called to ensure that the settings flyout hides in the background, and at that point if you trigger for another flyout to show, it will not find in the DOM, and may raise error like "Invalid argument: Showing flyout requires a DOM element as its parameter.".

    To further check you can have a look at ui.js  for the following code:

    // We expect an anchor
                    if (!anchor) {
                        // If we have _nextLeft, etc., then we were continuing an old animation, so that's OK
                        if (!this._retryLast) {
                            throw new WinJS.ErrorFromName("WinJS.UI.Flyout.NoAnchor", strings.noAnchor);

    Arindam Basu

    Monday, November 26, 2012 7:14 PM
  • It does not raise an error of any kind.

    It displays the popup menu correctly, just clicks will be eaten by the appbar clickeater and not reach the popup menu.

    Tuesday, November 27, 2012 10:12 AM