SAP / openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.
http://openui5.org
Apache License 2.0
2.94k stars 1.23k forks source link

Android keyboard in sap.m.Dialog in sap.m.Input jumping constantly #3096

Closed Denis2017 closed 3 years ago

Denis2017 commented 3 years ago

OpenUI5 version: 1.85

Browser/version (+device/version): Any Android device

Any other tested browsers/devices(OK/FAIL): Safari - OK

Steps to reproduce the problem:

  1. sap.m.Dialog has two components - sap.m.Input and sap.m.List
  2. When sap.m.Input has focus (the cursor in field) - the keyboard either jumps (appears and hides) every time the cursor blinks in the Input-field or disappears immediately when sap.m.Input has focus (in different versions of Android one of these behaviors)

If the scenario is the same, but all the components are on the View itself (not in sap.m.Dialog), everything works well. The problem is only in the phone on the any Android platform. Everything works well in Safari.

What the problem looks like: https://drive.google.com/file/d/1Me6Mx5hD9DupLyqLcLcTZveI5RNjNv8P/view?usp=sharing

NHristov-sap commented 3 years ago

Hi @Denis2017 ,

Thanks for your finding. Can you please give a working example in JSBin that demonstrates the issue?

Best Regards, Nikolay Hristov SAPUI5 SAP Development support

Denis2017 commented 3 years ago

Hi @NHristov-sap,

Thanks for the answer.

I'm not sure if the problem is reproducible in JSBin, since there all components are created by code. I describe the structure in View and Fragments.

Below I will try to describe the problem as much as possible with code examples.

There is an application based on sap.m.SplitApp component:

<mvc:View controllerName="Demo.controller.App"
          xmlns:mvc.    ="sap.ui.core.mvc"
          displayBlock  ="true"
          xmlns.        ="sap.m">
    <App id="App">
        <SplitApp id                 ="appControl"
              afterDetailNavigate="afterContainerNavigate"
              afterMasterNavigate="afterContainerNavigate"
              orientationChange  ="orientationChange"
        />
    </App>
</mvc:View>

sap.ui.define([
    "Demo/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("Demo.controller.App", {
        onInit: function () {
            this.getOwnerComponent()._appController = this;
        },

        onAfterRendering: function (event) {

        },

        afterContainerNavigate: function (event) {

        },

        orientationChange: function (event) {

        },
    });
});

Also there is ''SearchDialog'' fragment sap.m.Dialog with sap.m.Input and sap.m.List:

<core:FragmentDefinition xmlns:core="sap.ui.core"
                         xmlns     ="sap.m">
    <Dialog verticalScrolling="false"
                showHeader   ="true"
                title        ="Title Dialog"
                titleAlignment   ="Center">
       <VBox alignItems    ="Center"
             justifyContent="Center"
             renderType    ="Bare"
             width         ="100%">
              <Input width="100%"/>

              <List growing           ="true"
                    growingThreshold      ="50"
                    mode              ="SingleSelectMaster"
                    includeItemInSelection="true"
                    growingScrollToLoad   ="true"
                    width         ="100%">
                <StandardListItem title           ="Title"
                                  iconDensityAware="false"
                                  iconInset   ="false"
                                  type        ="Active"
                />
              </List>
       </VBox>
    </Dialog>
</core:FragmentDefinition>

SearchDialog is born like this:

var controller = this.getOwnerComponent()._appController;
if (!controller._searchDialog) {
    controller._searchDialog = sap.ui.xmlfragment("Demo.view.SearchDialog", controller);
    controller.getView().addDependent(controller._searchDialog);
}
controller._searchDialog.open();

On Android OS, if the cursor is in the input field - every time the cursor blinks, the keyboard appears and disappears (as in a loop). That is, it looks like the Input field loses focus, then returns it again. And the keyboard behaves accordingly. Video of how it looks at the beginning of this post.

There is no such problem in iOS and everything works well.

Thanks.

Martotko commented 3 years ago

Hi @Denis2017 ,

I was not able to reproduce the issue with the given codebase. Could you please modify this example so as to analyze the problem?

Best regards, Martin

elenastoyanovaa commented 3 years ago

Since there is no response from the author for more than 4 weeks I'm closing the ticket.

ra1vi2 commented 1 year ago

Same issue occurs with me as well.

I have a dialog which contains a simple form. The simple form contains label and input.

When I run the app in android mobile chrome browser it looses the focus on input field automatically. Keyboard opens and as you type any character it will close and input field looses the focus.