SAPUI5 Input type number with soft keyboard 'next' button

[joshzavala]

Hello all,

After nearly 3 years on SCN, I'm finally posting my first question. I've been working on some lightweight Fiori-like apps, and I've ran into an interesting situation I haven't figured out yet. I'm still fairly new to SAPUI5 tools, so if what I describe is expected behavior I'll feel much better.

Here's the situation: The app I'm currently working on was developed in Web IDE following the MVC format. My view is in XML. The devices used are Android powered scanners and Windows desktops. I have an Input control for a material number. Although material numbers can be alpha-numeric, the users have requested to use numbers only in the control. SAP provides an easy way to do this by stating the 'type' to be a number.

<List id="list" headerText="{i18n>formTitle}">
	<InputListItem label="{i18n>materialNumber}">
		<Input id="matnr" type="Number" maxLength="18" placeholder="                 {i18n>materialPlaceholder}" submit="onMaterialEntered"/>
	</InputListItem>
<!-- rest of xml code -->

Notice I also have a 'submit' event on the Input control so when the app detects an 'enter' from the user on the field, the controller will take the requested material number and perform a select on the SAP backend. This works perfectly fine on the desktops.

The problem is with the soft keyboard on the Android scanners. For reference, it's Android OS ver 4.1.2 (I have also observed the same behavior on my personal Android phone ver 6.0.1). The soft keyboard for the Android OS number pad does not contain an 'enter' key but instead has a 'next' key. The 'next' key does not trigger the 'submit' event on the Input control. What happens by default is the focus moves off the Input and to the next available control.

My question is: what do I need to do for the Input control to recognize the 'next' button as a 'submit' event on an Android OS soft keyboard number pad?

I have tried to attach/override the 'onsapnext' function of the control without success.

//inside the Init() function of the controller
var oMaterial = this.byId("matnr");
oMaterial.onsapnext = (function(oEvent){
	if (!sap.ui.Device.system.desktop) {
		this.onMaterialEntered(oEvent);
	}
}).bind(this)

But this causes the soft keyboard to work incorrectly or not at all on the other input fields. I have also tried it using the 'onsapfocusleave' to the same result. Lastly, I've tried to attach the "blur" browser event which does not appear to work at all.

I know I could probably solve this issue by adding a submit type button near the input control, but I don't think it looks as clean and seems unnecessary.

Any help or suggestions are greatly appreciated.

~Josh

[erik_vermaas1]

Hi Josh,

Congratulations on your first post. This is my first post too 🙂

I had a similar problem not being able to react on that silly NEXT button. I find it peculiar that the numeric keyboard does not have an ENTER og RETURN key. But I managed to detect the NEXT-button-press and run code. The trick is to use the "onkeydown" function and scan for keyCode == 9 . The code below is used in the init of my Neptune app.

However, this did not solve my issue, which was updating my app with the input. Somehow the inputvalue did not come along through the binding. It seems the value from the UI-element did not yet update the binding-structure. I found no way to read the input value and could not use this. But maybe you find how to get hold of this ( I am a beginner in this field ).

Kind regards,

Erik Vermaas

function interceptReturnKey(evt) {
var evnt = (evnt) ? evnt : ((event) ? event : null);
if (evnt.keyCode == 9 )
< PUT YOUR CODE HERE >
}
document.onkeydown = interceptReturnKey;

[joshzavala]

Hi Erik!

The "onkeydown" function was a good idea. I hadn't tried that when I initially posted my question. I would suppose your app wasn't updating with the function because the binding wasn't detecting a triggering event, which is really where all our problems are coming from in the first place.

We deployed our apps on version 1.38.17 of the SAPUI5 build. Perhaps there is a more robust solution today on the most current version, but we haven't had to make any changes yet (although I'd love to upgrade).

In the end, for my situation, I placed a separate "enter" type button near the field for the users to press. Wasn't what I really wanted to do, but it does work flawlessly.

Cheers!

Josh