8000 fix(mdSelect): fix flickering of ngMessages on mdSelect opening · code-tree/material@c68869e · GitHub
[go: up one dir, main page]

Skip to content

Commit c68869e

Browse files
montgomery1944ThomasBurleson
authored andcommitted
fix(mdSelect): fix flickering of ngMessages on mdSelect opening
To properly prevent ngMessages from showing up on select opening, we have to stop blur event propagation to ngModel listener. To be close to mdInput behaviour, we do it only, when mdSelect was opened. closes angular#7636 Closes angular#7646
1 parent c123dc4 commit c68869e

File tree

2 files changed

+28
-11
lines changed

2 files changed

+28
-11
lines changed

src/components/select/select.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -299,19 +299,19 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
299299
}
300300
});
301301

302-
// Wait until postDigest so that we attach after ngModel's
303-
// blur listener so we can set untouched.
304-
$mdUtil.nextTick(function () {
305-
element.on('blur', function() {
306-
if (untouched) {
307-
untouched = false;
308-
ngModelCtrl.$setUntouched();
302+
// Attach before ngModel's blur listener to stop propagation of blur event
303+
// to prevent from setting $touched.
304+
element.on('blur', function(event) {
305+
if (untouched) {
306+
untouched = false;
307+
if (selectScope.isOpen) {
308+
event.stopImmediatePropagation();
309309
}
310+
}
310311

311-
if (selectScope.isOpen) return;
312-
containerCtrl && containerCtrl.setFocused(false);
313-
inputCheckValue();
314-
});
312+
if (selectScope.isOpen) return;
313+
containerCtrl && containerCtrl.setFocused(false);
314+
inputCheckValue();
315315
});
316316
}
317317

src/components/select/select.spec.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,23 @@ describe('<md-select>', function() {
158158
expect($rootScope.myForm.select.$touched).toBe(true);
159159
}));
160160

161+
it('should remain untouched during opening', inject(function($compile, $rootScope) {
162+
var form = $compile('<form name="myForm">' +
163+
'<md-select name="select" ng-model="val">' +
164+
'<md-option>1</md-option>' +
165+
'</md-select>' +
166+
'</form>')($rootScope);
167+
var unwatch = $rootScope.$watch('myForm.select.$touched',
168+
function(touched) {
169+
expect(touched).toBe(false);
170+
});
171+
var select = form.find('md-select');
172+
openSelect(select);
173+
unwatch();
174+
closeSelect();
175+
expect($rootScope.myForm.select.$touched).toBe(true);
176+
}));
177+
161178
it('restores focus to select when the menu is closed', inject(function($document) {
162179
var select = setupSelect('ng-model="val"').find('md-select');
163180
openSelect(select);

0 commit comments

Comments
 (0)
0