Window for input text is moved to the top after using on-screen keyboard on surface

Question

I have the following code in WinJS:

<win-menu id="showAddContentMenu"
          anchor="'#showAddContentMenuCommand'">
    <win-menu-command label="::'newFolder' | translate"
                      ng-click="showFileNameFlyout()"
                      id="newFolderCommand">
    </win-menu-command>
    <win-menu-command label="::'uploadContent' | translate"
                      ng-click="uploadFile()">
    </win-menu-command>
</win-menu>

<win-flyout id="createFolderNameFlyout"
            anchor="'#newFolderCommand'">
    <form ng-submit="createNewFolder(addContent.folderName);hideFileNameFlyout();">
        <input type="text"
               ng-model="addContent.folderName" />
        <button class="btn-green"
                type="submit"
                ng-disabled="addContent.folderName.length === 0"
                ng-bind="'create' | translate">
        </button>
    </form>
</win-flyout>

When I click the New Folder button it pops up a form where I have to introduce a name for the folder, but if I am on a surface and I do the same and after I open on-screen keyboard the form for inputting text is moved to the top.

Here is the showFileNameFlyout function:

 $scope.showFileNameFlyout = function () {
     const winControl = document.getElementById('createFolderNameFlyout').winControl;
     winControl.show(document.getElementById('showAddContentMenu'), 'left', 'center');
 };

Does anyone have an idea how to solve that? I want, after I close on screen keyboard, the win-flyout element not to move on the top. Thanks!

which version of winjs are you using? And it would be much helpful if you can share a basic demo that can reproduce the problem. — Elvis Xia - MSFT, Nov 02 '17 at 05:20
can you try putting events like show or focus to input in setTimeout once and check? this is not fix. if it's fixing your issue then will tell you the next proper fix. — MehulJoshi, Nov 03 '17 at 09:33
any or all the focus and then you can remove it one by one. you will fins one which is causing this behaviours. and yes I am talking about all the event firing code, when you're doing focus by code. — MehulJoshi, Nov 03 '17 at 10:02
@MehulJoshi I put document.getElementById("createFolderNameFlyout").focus(); in showFileNameFlyout function and still not working — joesid, Nov 03 '17 at 12:04
Can you create fiddle? So I can test it, and give you solutions? — MehulJoshi, Nov 03 '17 at 15:06

Window for input text is moved to the top after using on-screen keyboard on surface

0 Answers0