Input looks ready for input but does not have curosr

[ricardosaracino]

What is the expected behavior?

Cursor is in the input and its focused

What is the current behavior?

element is not accepting input

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

"@angular/animations": "^7.2.3",
"@angular/cdk": "^7.3.0",
"@angular/common": "^7.2.3",
"@angular/compiler": "^7.2.3",
"@angular/core": "^7.2.3",
"@angular/flex-layout": "^7.0.0-beta.23",
"@angular/forms": "^7.2.3",
"@angular/material": "^7.3.0",
"typescript": "3.1.6"

IE 11.2724

Is there anything else we should know?

[ricardosaracino]

Got it reproduced with minimal code
https://github.com/ricardosaracino/angular7-ie-issue

[macjohnny]

@ricardosaracino Here is your example, working on stackblitz:
https://stackblitz.com/edit/github-nlkqcg?file=src%2Fapp%2Fcomponents%2Flogin%2Flogin.component.html
The issue occurs e.g. when exactly clicking the bottom line of the input or simply in an area beyond the extent of the actual input element.

Here is a minimal example: https://stackblitz.com/edit/angular-material2-issue-me7v5p?file=app/app.component.html
However, I was not able to reproduce the issue with the minimal example.

Here is a minimal example with the most recent material version 7.3.1:
https://angular-material2-issue-d9atfa.stackblitz.io/
The issue also occurs here.

The issue only occurs for matInput with a placeholder attribute

The issue arises due to
https://github.com/angular/material2/blob/a4c235aa12c5c9a968c6b21dfd7ff6bec8df03a4/src/lib/form-field/form-field-input.scss#L90

which results in

:-ms-input-placeholder.mat-input-element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

and this prevents focussing the field programmatically in
https://github.com/angular/material2/blob/a4c235aa12c5c9a968c6b21dfd7ff6bec8df03a4/src/lib/input/input.ts#L313-L315
invoked by
https://github.com/angular/material2/blob/a4c235aa12c5c9a968c6b21dfd7ff6bec8df03a4/src/lib/form-field/form-field.html#L2-L3

See this example https://codepen.io/macjohnny-zh/details/WPXWvy

(Code: https://codepen.io/macjohnny-zh/pen/WPXWvy)

See also https://stackoverflow.com/a/54572888

Solution: temporarily set -ms-user-select: auto before executing inputElement.focus()

[macjohnny]

@ricardosaracino the issue only occurs if the placeholder attribute is set in the input.
As a workaround until #15108 is merged, you can add the following css to your global styles

/* workaround for https://github.com/angular/material2/issues/15093 */
:-ms-input-placeholder.mat-input-element {
  -ms-user-select: text !important;
}

See the working example here: https://angular-material2-issue-lznbpw.stackblitz.io
(https://stackblitz.com/edit/angular-material2-issue-lznbpw?file=styles.scss)

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