sap.m.input focus issues

[Former Member]

Hello all,

I'm facing an issue with sap.m.Input on UI5 hybrid app on iPad.

I'm using sap.m.Input in a sap.m.Dialog. When the UI5 library upgrades to 1.26 and iOS upgrades to 8.0, the issue happens.

When the dialog pops up, there's a cursor in the Input and the soft keyboard also pops up, but in a few seconds, the keyboard withdrew while cursor disappears(all automatically, there's no user's action on iPad). And after that, the dialog sometimes becomes transparent.

I'm guessing this issue happens because there's focus on the input first but then the focus moves to somewhere else. I've tried to use "document.activeElement.blur()" to remove focus, but it was in vain.

Could anybody helps on this issue?

Thanks very much!

Best Regards,

Angel

[former_member182862]

HI Angel

Do you add any code to place the cursor on the input control?

Thanks

-D

[Former Member]

Hi Dennis,

Actually...no I think...

I just declare a sap.m.Input and put it in the content of a sap.m.Dialog.

Is there any suggestion from your side?

Thanks!

Best Regards,

Angel

[former_member182862]

Hi Angel

Maybe after the dialog on opened, we explicitly set focus on the input control like this

Example

-D

[Former Member]

Hi Dennis,

Thanks for the example! It works for the focus issue.

But the problem is that... When the dialog opens in the iOS simulator, the focus is on the Input at first, but after a few seconds, the cursor and the focus disappear strangely. I don't know what cause this problem, since this only happens when I upgrade UI5 to 1.26 and iOS to 8.0.

Is it possible to remove the focus of the Input? It is OK with me not to focus on the Input first. But "document.activeElement.blur()" or " this.getContent()[0].$().find('input').blur()" doesn't work from my side.

Thanks you!

Best Regards,

Angel

[former_member182862]

hi Angel

it appears to work.

Example

-D

[Former Member]

Hi Dennis,

This is where is strange... It works on Web. But on iOS simulator, " this.getContent()[0].$().find('input').blur()"  remove the focus blue border, while the cursor still appears one second(as the first image) and then disappear(as the second image), which cause a crash of the app. Do you know how to fix this?

(We use Cordova to package the UI5 project into a native app.)

Thanks a lot!

Best Regards,

Angel

[former_member182862]

HI Angel

I tested it on my iphone and it works ok.

Did you test it on a real mobile device?

Thanks

-D

[Former Member]

Dear Dennis,

I've both tested on iPad simulator and real device.

It's strange that this issue only occurs with "UI5 1.26 + iOS 8".

It can't be reproduced with "UI5 1.26 + iOS 7" nor "UI5 1.24 + iOS 8".

I'm confusing...

Thanks!

Best Regards,

Angel

[former_member182862]

Hi Angel

This can be a bug introduced in the latest release.

Can you file a bug?

Thanks

-D

[ffleige]

Hi Angel,

we have the same issue here with SAP UI5 1.26(.3) and fixed this by extending the sap.m.Dialog class and forcing the webkit engine to rerender the dialog after it has been opened:

jQuery.sap.declare("de.grz.ui5.bas.ui.Dialog");
sap.m.Dialog.extend("de.grz.ui5.bas.ui.Dialog", {

  renderer: "sap.m.DialogRenderer",

  init: function() {
  sap.m.Dialog.prototype.init.apply(this, arguments);
  // fixes the uggly transperency bug when running in a cordova container 
  this.attachAfterOpen(function(oEvent){
  var oSource = oEvent.getSource();
  if (!oSource) return;
          var oDomEl = document.getElementById(oSource.getId());
          if (oDomEl) {
              oDomEl.style.display='none';
              oDomEl.offsetHeight; // no need to store this anywhere, the reference is enough
              oDomEl.style.display='';
          } 
  },this);
  }
});

<core:FragmentDefinition
  xmlns="sap.m"
  xmlns:core="sap.ui.core"
  xmlns:grzbasui="de.grz.ui5.bas.ui">
  <grzbasui:Dialog
    title="MyDialog">
 <grzbasui:content>
     <Text text="Content goes here..."/>

 </grzbasui:content>
  <grzbasui:endButton>
  <Button text="Close" press="handleCloseDialog/>         
 </grzbasui:endButton>
  </grzbasui:Dialog>
</core:FragmentDefinition>

We also extended sap.m.SelectDialog:

jQuery.sap.declare("de.grz.ui5.bas.ui.SelectDialog");
sap.m.SelectDialog.extend("de.grz.ui5.bas.ui.SelectDialog", { 
  init: function() {
  sap.m.SelectDialog.prototype.init.apply(this, arguments);
  // fixes the uggly transperency bug when running in a cordova container 
  this._oDialog.attachAfterOpen(function(oEvent){
  var oSource = oEvent.getSource();
  if (!oSource) return;
          var oDomEl = document.getElementById(oSource.getId());
          if (oDomEl) {
              oDomEl.style.display='none';
              oDomEl.offsetHeight; // no need to store this anywhere, the reference is enough
              oDomEl.style.display='';
          } 
  },this);
  }
});

Hope that helps!

Best

Frank