select: can have 2 options with a selected (grey) background

[lpatingre]

Hi,

With Angular Materials 1.1, it seems that both the md-option with the focus and the one with mouse-over have a grey background. You can view that on the demos page:
https://material.angularjs.org/latest/demo/select

So clicking on a select you can move one of the grey background elements with the keyboard arrows and the other by hovering the mouse, leading to 2 different elements having a grey background (both can differ from the currently selected option which has a blue text color).

I couldn't find it reported and it felt a bit confusing to me.
So I just wanted to confirm if it was intended behavior (trying to please both people navigating with the mouse and people navigating with the keyboard) or something you intended to modify in a future release.

Thanks.

[ThomasBurleson]

@clshortfuse - Would you respond to @lpatingre here? THx.

[clshortfuse]

@lpatingre I took a look at your issue and, yes, two background colors is an issue.

It appears as though this actually stems from usage of both focus and hover styles of popup items. After using different Google sites as reference (namely Google Drive), it seems it would be better that popup items do not have focus and instead, be managed by the controller. The background color should based on navigation, and said navigation should move when a user hovers on an element.

mdMenu appears to move navigation on hover, as I stated, but it seems as though it too can style two items at the same time.

[clshortfuse]

The current plan is to create a new shared implementation between select, menu, and autocomplete in terms of vertical list navigation for Angular Material 2. Angular Material 1 will use a backport of the completed feature.

[lpatingre]

Sounds good. Thanks for the update.

[Splaktar]

This is still reproducible. Unfortunately, the spec for menus provides no guidance on how to handle this.

There is currently no plan to backport a "shared implementation" of focus from Angular Material. However, it should be noted that this same behavior exists there today: https://material.angular.io/components/select/overview.

Note that MDC Web's Select uses a different grey for

• hover

.mdc-list-item:hover::before {
    opacity: .04;
}

• focus

.mdc-list-item:focus::before {
    opacity: .12;
}

This may be feasible to do in AngularJS Material.

[clshortfuse]

FYI, my current solution is to trigger focus on the mousemove event.

https://github.com/clshortfuse/materialdesignweb/blob/ed1910af16c5a6d1c2377532fb5fe9dce7f758fe/components/menu/item.js#L121

This replicates how desktops operating systems handle mouse interaction. That results in keyboard and mouse always being synchronized.

Even if the focus operation isn't explicitly used case, it makes sense for the keyboard to continue off from the last item the mouse hovered over.