Mat-Select with appearance="standard": Arrow too high

[seritools]

Bug, feature request, or proposal:

When using appearance="standard" on a mat-form-field, the arrow of a mat-select moves up quite a lot.

What is the expected behavior?

The arrow should be at the same location as with legacy appearance.

What is the current behavior?

A translateY(-50%) is applied to the arrow-wrapper, moving it too high.

What are the steps to reproduce?

Stackblitz, based on an example from the Angular Material docs: https://stackblitz.com/edit/angular-o9gzca?file=app/select-no-ripple-example.html

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

Tested with 6.2.1, updated to 6.3.0, still occurring. Angular 6.0.6, Typescript 2.7.2.
Tested in Chrome 69 dev, IE11, Vivaldi, etc.

[johnbuffington]

hi @mmalerba, it looks like the "standard" appearance is the only appearance type in which the arrow doesn't look correct, even though it is "correctly" centered. one way this could be fixed is to check if the placeholder input property or mat-label directive is being used. if either one is being used, the style should be translateY(-50%) and no style if no placeholder or mat-label. what do you think?

here's the blame for reference:
https://github.com/angular/material2/blame/0675e0513d511e18fc72805a8817046cc1630468/src/lib/select/select.scss#L49

[mmalerba]

@johnbuffington yeah that seems reasonable, do you want to send a PR for it?

[seritools]

Hmm, even with a label, as long as no value is selected it looks weird, because the label transitions into the value area. The other non-legacy appearances have a visible height because of the border/background, and their value area is moved way up as well.
Comparing these, the position of the value string seems more like the problem. IMHO either the arrow always needs to be lower for the standard appearance, or the value display needs to move up to the same height as the fill/outline appearances.

EDIT: For an easy comparison: https://stackblitz.com/edit/angular-o9gzca-6nuihz?file=app/select-no-ripple-example.html

Would it be possible to shift the arrow up to the current position whenever the select has a selected value?

[mmalerba]

@seritools That is not something I've seen in the spec, but the spec also seems to have completely removed this variant... so I'm ok with it if it doesn't look too jarring. If one of you wants to send a PR with this change I'll take a look and see how it feels.

[seritools]

I think I misread the way issues are referenced in the commits :S
But yeah, that would be my attempt at solving this, have a look. :)

[simeyla]

There are still no examples under mat-select for a control with appearance='standard'.
So when you add appearance='standard' to a form field you get something that just looks wrong.

To be honest I'm getting used to it, but at first the way it looks really is bizarre, compared to the other example styles. At the very least the documentation needs updating, to include examples for appearance=standard and explain that the arrow is higher in the new format.

@simeyla I noticed this as well a few months ago, and even reported a bug for it (#13907).
The animation added by #12045 might help a little, but there are some case where the arrow definitely doesn't sit right on its current position. For example, paginators' size selectors, since their height is very short compared to other select elements. You can see a StackBlitz example of this case, on the ticket I reported.

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