WinJS Flyout keeps closing - controls cannot be clicked

Question

I'm writing a Win Universal App (JS) and have implemented a Flyout. The Flyout is accessed via a button in a toolbar. Code for flyout -

<button data-win-control="WinJS.UI.Command" data-win-options="{
        id:'cmdChangeCategory',
        label:'Change Category',
        section:'selection',
        type:'flyout',
        icon:'video',
        tooltip:'Change Category',
        flyout:'changeCatFlyout'}"></button>

Flyout div -

<div id="changeCatFlyout" data-win-control="WinJS.UI.Flyout">
    <label for="ddlChangeCategory" style="display:block;clear:both;margin-top:10px">Select Category</label>
    <select id="ddlCategoryChange"></select>
    <button id="btnChangeCategory" title="Change" style="display:block;clear:both;margin-top:10px">Change</button>
</div>

The flyout displays when the button is clicked and looks fine, the issue is that the controls inside the flyout cannot be interacted with (the dropdown is populated through JS). Whenever I try and click the dropdown or the button, the flyout simply closes. I've tried making the flyout div a direct child of the body as I saw this elsewhere as a possible solution.

Any ideas???

I should add trying this in the WinJS Playground works - to my frustration!!

Is the toolbar the button is in also a flyout? There's only one flyout collection, so if you show your changeCatFlyout while responding to another flyout that's about to be light dismissed the new one will be dismissed with the old one. — Rob Caplan - MSFT, Jan 14 '16 at 23:52

score 1 · Answer 1 · answered Jan 19 '16 at 18:51

1

Flyouts should be direct children of document.body. Make sure that the fly out is not nested in other divs.

answered Jan 19 '16 at 18:51

Martin Beeby

4,523
1
26
20

score 0 · Answer 2 · answered Mar 09 '16 at 13:17

I don't know if this is the same problem as yours but I thought I'd comment in case anyone else has the same problem as I had.

Basically this fiddle I have put together was similar to my code : https://jsfiddle.net/reko91/yg0rs4xc/13/

Notice the css :

#wholeContainer {
  position: fixed;
}

As this wholeContainer was the container for everything the position:fixed; was interfering with the click event on the elements in the flyout. I changed this to absolute, and it works perfectly again :)

Updated fiddle : https://jsfiddle.net/reko91/yg0rs4xc/14/

Hope that helps someone :)

score 0 · Answer 3 · edited May 23 '17 at 12:10

See this answer by THETODD.

Basically the issue is that you need to define your data-win-control="WinJS.UI.Menu" parts OUTSIDE of the parental fixed DIV. It seems that you cannot position:FIXED a DIV and then position:FIXED another inside of that and expect the flyout to work on all browsers (works in IE .. ha). The WinJS.UI.Menu is also trying to position:fixed.

so ...

<div id="aMenuBar" style="position:fixed">
  <button id="settingsButton" class="win-button">Settings</button>
</div>

<!-- this part cannot be in the fixed div above -->
<div id="settingsFlyout" data-win-control="WinJS.UI.Menu">
  <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:alwaysSaveMenuItem',label:'Always Save Drafts',type:'toggle',selected:'true'}"></button>
</div>

WinJS Flyout keeps closing - controls cannot be clicked

3 Answers3