Ionic - Go to the next input field instead of submitting the form

Thanks a lot!

The focusNext() works only for ionic inputs, checkboxes, datetime…
But its not working in ionic dropdown…
Have you any solution for focusNext on ionic Dropdown using TextInput?

When pressing Enter throws the below exception:(for Dropdown)image

@anbucse I think that is an Ionic bug.

When you say dropdown do you mean ion-select? I don’t have that problem (I’m in the version 3.5.2 of ionic-angular), are you using a recent version of it?

In my case when I press Enter in a field before the ion-select, the ion-select is focused (although it appears as nothing happened). If I press Enter again the modal with the options is showed (default behaviour of ion-select, also triggered when clicked).

I saw that there is this issue about the same problem, but with ion-datetime, and unrelated with this directive to focus the next field:

That was closed because it was not reproducible (perhaps it was fixed in the meantime).

Someone suggested to create a stub method (that does nothing, just to avoid that error):

Maybe you can create a new issue about that (for ion-select) assuming you are in the latest release, and reference the ion-datetime issue (or just post your error in the referenced issue).

Thank you for sharing your solution, @lucasbasquerotto.
I tried to implement it in my Ionic 3 app, however I’m experiencing strange issues in combination with the autocorrection. When the return-key is clicked in input-field1, the focus changes to the next input field - let’s say input-field2 - everything is fine up to here.

However, when I start typing something in input-field2, the value of input-field1 is continued. It seems like input-field2 is composed of the value of input-field1 and what the user types in for input-field2.

If I e.g. typed the value “John” in input-field1, click enter and start typing by pressing “D” in input-field2, the value you see is “JohnD” instead of just “D”.

This seems to occur only in inputs, where the autocorrection is turned on.

Did you experience this as well and have any idea how to fix it?

Thank you!

I did some further investigations.

The issue only occurs when autocomplete / autocorrect is turned on for the respective input. Somehow, the autocorrection doesn’t recognize, that the input field is changed and that know a new input begins. Hence, it just considers the new input to continue the first one…

When I check the value of the second input field in that moment that it is focused, it is empty: “”. As soon as at least one letter is typed, the value changes to value of first input + typed letters.

I didn’t find any way to stop this behavior without turning of the autocompletion…

Does anybody has an idea how I could approach this? Thank you!

Nobody any idea how to solve this? Any help would be appreciated!

@JayKay I tried but could not reproduce the issue in my device (Android 6.0). With autocorrect do you mean spellcheck? (I haven’t found an autocorrect property for ionic components)

I tried with autocomplete="true" spellcheck="true" and it worked fine with me. Are your inputs ion-inputs or some other type of input?

Hi @lucasbasquerotto. Thanks for your reply.
I experience the issue on Android 6.0.1 with standard Ionic text inputs (<ion-input>), where the user can input his name, address and so on.

You can find autocorrect and autocomplete in the documentation of ion-input listed as “Input Properties” (Link).

However, you need to use autocomplete = "on" and autocorrect = "on" instead of = "true".

@JayKay I used both autocomplete = "on" and autocorrect = "on", but couldn’t reproduce the issue. If I start writing a word in a field, because of the autocorrect it may highlight a word that will show if I press space or some punctuation mark, but if I press the next button, it simply goes to the next field, and if I type in it, the text will appear only in this field.

Are you using some other directive or field event (or some listener to keyboard events) that may be causing this conflict? If you just click the next field (without pressing the next button), it works fine? Can you reproduce this issue in another device (if possible)?

@JayKay I’ve changed my directive because I had some problems with the older one (when using custom components). Hopefully this can also solve your issues. The new directive is as follows:

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
	selector: '[spFocusNext]'
})
export class FocusNextDirective {

	@Input('spFocusNext')
	public enabled: boolean;
	
	constructor() { }

	@HostListener('keydown', ['$event'])
	public onInputChange(e: KeyboardEvent) {
		if (this.enabled) {
			var code = e.keyCode || e.which;

			if (code === 13) {
				e.preventDefault();
				let control: HTMLInputElement = <HTMLInputElement>e.srcElement;

				while (control) { 
					let nextControl = <HTMLInputElement>control.nextElementSibling;
					
					if (nextControl) {
						control = nextControl;

						while (nextControl && (!this.isFocusable(nextControl))) {
							control = nextControl;
							nextControl = <HTMLInputElement>nextControl.firstElementChild;
						}

						if (nextControl) {
							control = nextControl;
							break;
						}
					} else {
						control = <HTMLInputElement>control.parentElement;
					}         
				}

				if (control && control.focus) {
					control.focus();
				}
			}
		}
	}

	private isFocusable(control: HTMLInputElement): boolean {
		return (
			(!control.hidden) && 
			(
				control.nodeName == 'INPUT' || 
				control.nodeName == 'SELECT' || 
				control.nodeName == 'BUTTON' || 
				control.nodeName == 'TEXTAREA'
			)
		);
	}
}

(I’ve changed the directive name and the property name too. I also use a boolean flag to enable/disable because some fields may need to be disabled programatically, like cases where the last field may change. Just use it like: [spFocusNext]="true")

3 Likes

Hi @lucasbasquerotto,

Thank you for sharing the updated code. Unfortunately, it doesn’t change anything regarding my issue. I still experience the same strange behaviour, as if the autocorrection doesn’t recognize, that a new field means a new word.

Regarding the questions in your previous post:

  • I’m not using any other directives or field events.
  • Yes, when I click the next input-field manually, everything works as expected.
  • Unfortunately, I don’t have that many test devices. So far I was just able to produce this error on an OnePlus X with Android 6.0.1.

Thank you for your help. I appreciate it!

Working just great! Thanks

1 Like

working fine but how to show Next button on keyboard as given solution are not working

@vks_gautam1 In my case I always have a Next button (at least i think it is, it has an arrow forward and is in the bottom right corner of the keyboard in Android) and when pressed it submitted the form even if I was not in the last field, but now with the directive above if I’m not in the last field it goes to the next one.

1 Like

thanks a lot … it works properly

There is no such need to create directive. You can do it by just below code.

<ion-input #myInput (keyup.enter)="myInput.focusNext()"></ion-input>

Just as simple as that!

5 Likes

This isn’t working if you have inputs that you use *ngFor on them. It doesn’t focus on them.

hello lucasbasquerotto, How can I use directive in other pages, i mean it work only Home and List pages in ionic 2
Example I create new project using “ionic start demoexample” in which created two pages Home and List, your ‘tabindex.directive.ts’ work perfectly in both pages, then I create another page ‘registration’ but texindex.directive.ts is not work in this page so, please help me.

@ngsofttuse If I understood you correctly you aren’t able to use the directive because it is not imported in the module that imports your page.

In which module is your directive being imported? (let’s call it ModuleA)

In which module is your registration page being imported? (let’s call it ModuleB)

Does ModuleB imports ModuleA? (so that you can use the directive in your page)

Take a look at the module(s) that import your Home and List pages. That might give you a clue about what to do.