Skip to Content
avatar image
Former Member

sap.m.input focus issues

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Jan 13, 2015 at 05:13 PM

    HI Angel

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

    Thanks

    -D

    Add comment
    10|10000 characters needed characters exceeded

    • 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