Onsen UI for Android - keyboard key Next/Enter not firing any action

[esantamaria]

Background:
There’s a single page using onsen UI (version 2.10.8 or 2.7.0 - any of those are available to use and pick) that is displayed into an Android/iOS app by using webviews.

Problem:
When you are using an Android app and typing in values in an input, you should be able to use the enter button (to close the keyboard) or the arrow button (to send the focus to the next input) on the keyboard, however, it’s not doing anything.

The html code would looks like the following:

<input type="text" inputmode="decimal" id="iddummy1" class="amount text-input undefined" placeholder="test" input-id="transferAmount" autocomplete="off" value="">
<input type="text" inputmode="decimal" id="iddummy2" class="amount text-input undefined" placeholder="00.00" input-id="transferAmount" autocomplete="off" value="">
<ons-button id="btn-run-script" role="button" class="button-positive" modifier="large">Run Code
</ons-button>

Below you can see the keyboard and the blue enter key mentioned above:

On the image above, we are on the last input field and by pressing the blue key is not performing any action at all. so we need to use the back android key (to at least dismiss the keyboard).

Questions:

• Is there any code that could be added to our single page using onsen UI to fix this issue so that by pressing the arrow/enter key button on the keyboard works as expected ?

• Are we missing to add something into our <input> fields?

Thanks!

[emccorson]

I would guess that it is the same issue as this:
https://github.com/OnsenUI/OnsenUI/issues/2857

That issue has been fixed but not released yet.

If the behaviour works with a normal button but not ons-button, it is probably because the browser submits forms on enter when there is a single button present, but ons-button does not count as a button (hence the fix linked above adds a hidden button).

You could try adding the following to your HTML:

<button hidden></button>

jvjvjv created this issue in OnsenUI/OnsenUI

closed Vue: Tapping on the 'submit' key on mobile does not submit form. #2857

[esantamaria]

Hi, glad to see that you already worked on something similar, however, that just a piece of my issue, if you have multiple inputs the arrow key that is displayed on the keyboard to send the focus to the next input is not working… So you need to scroll and click the next input manually, instead of using the keyboard key for that.

Is that also fixed?

Thanks!!

[emccorson]

It should work if you wrap your inputs in a form element:

<form>
  <ons-input></ons-input>
  <ons-input></ons-input>
</form>