Focus is not working in iOS devices

[MSAppsDev]

What is the expected behavior?

setting focus should work across all devices

What is the current behavior?

its not working in iOS devices.

What are the steps to reproduce?

add a input field into angular reactive form, create a element ref to input field in type script then call
this.inputelementref.nativeElement.focus() in afterViewInit() event of the angular component.

see the sample code
https://stackblitz.com/edit/angular-xpweac

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5+ (not sure about lower versions), iOS 12+, Safari & Chrome on iOS.

Is there anything else we should know?

[Aleksandyr]

@MSAppsDev It seems that the problem comes from the browsers itself. You can see here that it is not specified if the mobile browser versions supports focus at all.
I have modified your sample and now it works as expected you can test it again.

[MSAppsDev]

@Aleksandyr , thanks for your time and the link that lists the browser support for native focus, yes sample works fine in IE and Chrome in both mobile and desktop but not on iOS devices. I did looked into the link before posting the question but wanted to know if anyone achieved this in angular? i know it can be done in react and vue.

[Aleksandyr]

@MSAppsDev I have modified the sample in order to work with IOS devices and I have tested it with IOS 12.1.4 Safari 12 and it worked perfectly for me. Could you please open the modified sample with IOS device and try to reproduce the problem again?

I have also created a video which is showing how to sample works.

[MSAppsDev]

Hi @Aleksandyr,
Thanks for your time.
I tested your sample code on iPad and android devices, it does not set focus on Input1 by default on any device (not even on Desktop) but it does on clicking "setFocus" button because i see that "shouldFocus" variable has been set to "false".
My intention is set the focus to Input1 on load without user interaction.

I updated "shouldFocus" variable to "true" then i got below error

ERROR
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-form-field-should-float: false'. Current value: 'mat-form-field-should-float: true'.

to avoid above error i updated ngAfterViewChecked as below

ngAfterViewChecked() {
if (this.shouldFocus) {
//this.input1Element.nativeElement.focus();
setTimeout(() => this.input1Element.nativeElement.focus(), 0);
this.shouldFocus = false;
}
}

with this change i see the focus is going to Input1 by default on Desktop (IE & chrome) but not on Mobile devices.

However ngAfterVIewChecked is called every time Angular has finished running change detection on a component and it's children where as ngAfterViewInit is called only during first change detection cycle.

So i moved ngAfterViewChecked() code to ngAfterViewInit() but it didn't work on mobile devices.
Input1 field is highlighted by default when i set focus explicitly after creating the formcontrol (please see "createForm()" in my sample code ) but the keyboard is not popping up even though input field is highlighted.

It sets the focus and shows keyboard on a button click event but not with non user interaction event.
I have tried below listed approaches but none of them worked in iOS devices.

1. added set focus code on a button click and trigger button click event programatically.
2. added "autofocus" directive on input input element in html as
   <input #input1 formControlName="input1" matInput type="number" autofocus >

[Aleksandyr]

Hello @MSAppsDev Sorry about my misunderstanding.

I faced the problem you have and that's what I've found during my research.

1. I couldn't mange to find any specification of how the focus should behave on the IOS devices which means that this is not a problem from their prospective. More importantly I have found that the problem is reproducible on an Android device as well.

2. I have tested the approach with ReactJS and it turns out that the problem is reproducible there too. If you have any samples with React where it clarifies that the approach works there I would be glad to check and investigate it.

3. I have found an interesting discussion in vuejs repository where they are proposing solution from their perspective which leads me to the question. Is this the right place for continuing the discussion or it is better to forward the question to angular repository itself and ask them what is the expected behavior for this approach?

[MSAppsDev]

Hi @Aleksandyr ,

Thanks for your time. Currently i don't have React & Vue environment to replicate the issue.
It will be good if someone from Angular community pitch in and explain if there is a proven solution to solve this focus problem in iOS devices.

[Aleksandyr]

@MSAppsDev I think it would be more appropriate if you refer the issue to the angular/angular repository.

@crisbeto @jelbourn Do you have any suggestions on how we could proceed with the issue?

[jelbourn]

This is unrelated to Angular Material, and I suspect unrelated to Angular as well. My guess would be that it's unrelated to Angular as well

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}