select: label style/position is wrong on iOS after other md-select selection occurs

[rantiev]

Type:

Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

http://output.jsbin.com/sabobu

Detailed Reproduction Steps:

1. Tap to first input, don't select any options
2. Tap to next

What is the expected behavior?

Color and position of label reverted to initial state

What is the current behavior?

The first is still focused: lable position not updated, color not reverted to gray

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

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.8
• AngularJS Material: 1.1.9
• OS: iOs
• Browsers: Mobile safari

Is there anything else we should know? Stack Traces, Screenshots, etc.

[Splaktar]

I am able to reproduce this on iOS 11.4. It seems like the blur events aren't being handled properly.

It looks like the newer versions of iOS introduce some non-standard way of interacting with select elements:

This can be seen with the following CodePen.

I don't have the ability to run older versions of iOS to determine when this behavior was changed.

I migrated this jsbin to CodePen so that I could change it.

[Splaktar]

It looks like that new select UI is on the iPhone X, but not the iPhone 5s:

This issue does not occur on macOS Safari (11.1.1 (13605.2.8)).

[Splaktar]

It looks like the class="md-input-focused" isn't being removed from the md-input-container when the blur event is fired.

The logic related to this can be found here:

material/src/components/select/select.js

Lines 364 to 386 in 6d41a08

	if (!isReadonly) {
	element
	.on('focus', function(ev) {
	// Always focus the container (if we have one) so floating labels and other styles are
	// applied properly
	containerCtrl && containerCtrl.setFocused(true);
	});
	// Attach before ngModel's blur listener to stop propagation of blur event
	// to prevent from setting $touched.
	element.on('blur', function(event) {
	if (untouched) {
	untouched = false;
	if (selectScope._mdSelectIsOpen) {
	event.stopImmediatePropagation();
	}
	}
	if (selectScope._mdSelectIsOpen) return;
	containerCtrl && containerCtrl.setFocused(false);
	inputCheckValue();
	});
	}

It's unclear to me what these comments about $touched mean or why these extra checks are here for select as compared to input:

material/src/components/input/input.js

Lines 410 to 423 in 6d41a08

	if (!isReadonly) {
	element
	.on('focus', function(ev) {
	$mdUtil.nextTick(function() {
	containerCtrl.setFocused(true);
	});
	})
	.on('blur', function(ev) {
	$mdUtil.nextTick(function() {
	containerCtrl.setFocused(false);
	inputCheckValue();
	});
	});
	}

[pavelsl]

Wow, i'm very impressed seeing one had reproduced issue i'm talking about. God bless you. I thought you are not exist. Hope in the new version we see less issues not more and this one.

Looking to https://material.angularjs.org/latest/demo/select on my iPad mini iOs 11 i can say that dropdown position never updated after scrolling. Not sure whether you want it like this.

[pavelsl]

Let's just migrate to new angular and improve new material lib (it's doc and components issues) instead )

[Splaktar]

I tested with $mdGestureProvider.skipClickHijack(); but it did not help with this case.

This appears to be related to clicking on the md-scroll-mask not sending a blur event to the select element on iOS only as mentioned in #9581 (comment).

[Splaktar]

I've posted PR #11739 to solve this.