Unintentional autofocus when using cdkTextareaAutosize

[hettiger]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Textarea should not autofocus.

What is the current behavior?

Textarea get's autofocus when using cdkTextareaAutosize.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-rtrc1b

EDIT Please see #11308 (comment)

Simple debug in an iOS Simulator or on a real device using Mobile Safari.
Add / Remove the cdkTextareaAutosize Directive, then reload to reproduce.

What is the use-case or motivation for changing an existing behavior?

Using pristine is no longer really an option because cdkTextareaAutosize breaks this for Mobile Safari. While the textarea is gaining autofocus the virtual keyboard does not pop up even thought there's visual feedback that the textarea is having focus. It's really a weird user experience and should get fixed.

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

• Angular: 6.0.0
• Material: 6.0.1
• OS: iOS 11.3.1
• TypeScript: ? (Stackblitz)
• Browsers: Mobile Safari

Is there anything else we should know?

I've attached screenshots of the expected behavior and the actual behavior.

Expected Behavior	Actual Behavior

[pfeigl]

Stackblitz was not working for me, createContactForm was not actually called and the form had an binding for submit where the handler was not available.

Anyways without having an apple device at hand, I'd guess that this code somehow triggers the focus on those devices while it shouldn't do it. But than again, it's just a rough guess:
https://github.com/angular/material2/blob/f5377ddd7352890644f5333a9a9a498580c2b92c/src/cdk/text-field/autosize.ts#L237

[hettiger]

@pfeigl Thanks for pointing that out. There must be something wrong with the Stackblitz. Maybe it didn’t save or I copied the url from a wrong browser tab or something like that. I will fix this asap and report back.

[hettiger]

@pfeigl

So this should now be working:

• https://stackblitz.com/edit/angular-ge466g
• https://angular-ge466g.stackblitz.io

Sorry for the inconvenience.

[pfeigl]

Thanks, just gave it a try and can reproduce with the following simple code:

<textarea id="box"></textarea>

<script type="text/javascript">
    var textarea = document.getElementById("box");
    textarea.setSelectionRange(0, 0);
</script>

which is pretty much what is happening internally

[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.}