Remove highlight md-input-container for mdInput[readonly] on focus

[leocaseiro]

Bug, feature request, or proposal:

Proposal: if we set a mdInput as readonly, it should not highlight the placeholder and border.
It's currently adding a highlight within the md-input-container.mat-focused.

What is the expected behavior?

I believe the border and placeholder should keep the style on focus.

What is the current behavior?

What are the steps to reproduce?

Focus on the readonly input

<md-input-container>
    <input mdInput placeholder="Focus on the input" readonly value="Example readonly" />
</md-input-container>

Providing a Plunker (or similar) is the best way to get the team to see your issue.
http://plnkr.co/edit/Y7hAk6fuZkFTCEfI52IU?p=preview

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

User Experience. A better way to show the user the input is readonly.

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

macOS Sierra Version 10.12.5
Chrome: 59.0.3071.115 (Official Build) (64-bit)

@angular: 4.2.5
@angular/material: 2.0.0-beta.8

Is there anything else we should know?

I would like to send a PR, but I'm not sure the best approach to solve that.

• Solution 1: Add an @Input() readonly to md-input-container(which could be duplicating code)
• Solution 2: Do not add the class mat-focused if is readonly
• Solution 3: Add a new class mat-focused--readonly os similar _onFocus() if the input is readonly. (so we wouldn't hightlight the placeholder os something like that) and the user can override it.

[grizzm0]

Unfortunately the spec does not say anything about read-only inputs. But on the other hand, disabled/read-only is HTML specific.

I think we should treat read-only as disabled. The user does not know the difference between the two.

The difference for devs are that one is sent through POST while the other is not (in traditional HTML/POST).

[susox]

@grizzm0 I wouldn't treat readonly inputs as disabled ones. A good case is the date-picker component. I would like to have a readonly input (for the date) but still have an enabled component where the user could click on it and display the date-picker. Although I can do this, now the highlight is gone for the input.

[leocaseiro]

@susox if you use a native date input (<input type="date" readonly />) you shouldn't be able to change its value.

Try it out: http://plnkr.co/edit/QUT9rKOneg7GEsoOYwnI?p=preview

The native input [readonly] works very similar to disabled, however, the material version also changes the label and input colors, which makes more clear the field is disabled.

If you really need to add focus on readonly, you might be able to create a directive or achieving that with CSS.

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