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!

Sholeen

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. – Frodina

@ElvisXia-MSFT Windows Library for JavaScript 2.0 – Sholeen

I mean a sample project. Not sample video. – Frodina

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. – Slopwork

@Slopwork I will try – Sholeen

@Slopwork do you mean <input type="text" onfocus="myFunction()"> like this ? on focus event? – Sholeen

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. – Slopwork

@Slopwork I put document.getElementById("createFolderNameFlyout").focus(); in showFileNameFlyout function and still not working – Sholeen

Can you create fiddle? So I can test it, and give you solutions? – Slopwork