Platform.ready questions and input focussing on Ionic View

Hey guys,

I’ve pretty much exhausted google for these few questions (even ended up on the 3rd page one point - the 3rd page!!!), so I’m hoping someone here can help.

My issues all revolve around focussing on inputs. The App is being used for fulfilment from a warehouse and involves many scan events with a paired bluetooth scanner. Scan order, scan pick tote, scan location then scan the items. Repeat the location and items for all orderlines. Admittedly I might need to look at a different scanner which offers an SDK and a cordova package so I can circumvent the need for inputs but we already have 10+ Motorolla scanners and they are great.

Issue 1: Trying to set focus on the first input when the app is ready:

initialiseApp() { this.platform.ready().then(() => { // toteInput fetched with @ViewChild('toteInput') toteInput; setTimeout(() => this.toteInput.setFocus(), 500); }); }

I can set the focus on the input with a setTimeout as above but if I remove the timeout focus is not set. Is there another function I can utilise that will negate the need for the timeout? I have tried all the angular ones: ngAfterViewInit(), ngAfterContentInit(). etc. While the timeout works I worry about issues with slower connections.

Issues 2 - Every method I try that correctly sets focus on my desktop fails to work in Ionic View

I cannot get a focus set on Ionic View no matter what I try. Is this a known issue perhaps?

I have tried all sorts of Angular methods for setting the focus but i’m finding it difficult because when using an ion-input as below you can’t use the renderer on the input as #toteinput refers to the ion-input object not the actual input that is generated.
<ion-input #toteInput (keyup.enter)="scanTote(toteInput, orderFocusTrigger)"></ion-input>

I had the same issues with buttons. Where all docs I read advise to use
Ionic seems to break this and while inspecting the object in console I noticed _elementRef which I was able to use successfully when firing a click event on a button like below.
this._renderer.invokeElementMethod(this.toteFocusTrigger._elementRef.nativeElement, 'click');
Is this the recommended approach to doing this?

I was experimenting with firing a click event on a button which then sets the focus on the input in response to an article I read from someone having similar issues with focus on IOS. This works fine on desktop, but again, not in Ionic View.

I am finding it supppperrrr frustrating to be stuck on something that is so easily done with something like jquery (.focus()) so I’m desperately looking for help. I’m sure I am missing something simple.

Thanks in advance.


Issue 1: you won’t need to focus on the input fields if you use bind keypress
$document.bind("keypress", function ($event) { if ($event.which === 13) { console.log('break'); } else { $scope.barcode += String.fromCharCode($event.which); } });
hereby you can catch every input.