Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 5a7e967

Browse files
committed
fix(select): md-focused not removed from options on panel close
- add tests for select menu options' focus decoration - improve some JSDoc for interimElement Fixes #11927
1 parent 1ed54bb commit 5a7e967

File tree

3 files changed

+75
-11
lines changed

3 files changed

+75
-11
lines changed

src/components/select/select.js

+1
Original file line numberDiff line numberDiff line change
@@ -1884,6 +1884,7 @@ function SelectProvider($$interimElementProvider) {
18841884

18851885
$mdUtil.nextTick(function () {
18861886
$mdSelect.hide(selectMenuController.ngModel.$viewValue);
1887+
opts.focusedNode.classList.remove('md-focused');
18871888
}, true);
18881889
}
18891890
}

src/components/select/select.spec.js

+62-2
Original file line numberDiff line numberDiff line change
@@ -267,17 +267,77 @@ describe('<md-select>', function() {
267267
var select = setupSelect('ng-model="val"').find('md-select');
268268
openSelect(select);
269269

270-
$document[0].body.appendChild(select[0]);
270+
body.appendChild(select[0]);
271271

272272
var selectMenu = $document.find('md-select-menu');
273+
// Dismiss the menu with the Escape key.
273274
pressKeyByCode(selectMenu, 27);
274275
$material.flushInterimElement();
275276

276277
// FIXME- does not work with minified, jquery
277278
// expect($document[0].activeElement).toBe(select[0]);
278279

279280
// Clean up the DOM after the test.
280-
$document[0].body.removeChild(select[0]);
281+
body.removeChild(select[0]);
282+
});
283+
284+
it('auto focuses option in the list when opened', function() {
285+
var select = setupSelect('ng-model="val"', ['One']).find('md-select');
286+
openSelect(select);
287+
288+
body.appendChild(select[0]);
289+
290+
var selectMenu = $document.find('md-select-menu');
291+
var mdOption = selectMenu.find('md-option');
292+
expect(mdOption[0].classList.contains('md-focused')).toBeTruthy();
293+
294+
// Clean up the DOM after the test.
295+
body.removeChild(select[0]);
296+
});
297+
298+
it('changes focus decoration on selection change by keyboard', function() {
299+
var select = setupSelect('ng-model="val"', ['One', 'Two']).find('md-select');
300+
openSelect(select);
301+
302+
body.appendChild(select[0]);
303+
304+
var selectMenu = $document.find('md-select-menu');
305+
var mdOption = selectMenu.find('md-option');
306+
expect(mdOption[0].classList.contains('md-focused')).toBeTruthy();
307+
308+
// Select the second option using the down arrow key.
309+
pressKeyByCode(selectMenu, 40);
310+
expect(mdOption[0].classList.contains('md-focused')).toBeFalsy();
311+
expect(mdOption[1].classList.contains('md-focused')).toBeTruthy();
312+
$material.flushInterimElement();
313+
314+
// Clean up the DOM after the test.
315+
body.removeChild(select[0]);
316+
});
317+
318+
it('removes md-focused from first option when second option is clicked', function() {
319+
var select = setupSelect('ng-model="val"', ['One', 'Two']).find('md-select');
320+
openSelect(select);
321+
322+
body.appendChild(select[0]);
323+
324+
var selectMenu = $document.find('md-select-menu');
325+
var mdOption = selectMenu.find('md-option');
326+
expect(mdOption[0].classList.contains('md-focused')).toBeTruthy();
327+
328+
clickOption(select, 1);
329+
$material.flushInterimElement();
330+
expect(mdOption[0].classList.contains('md-focused')).toBeFalsy();
331+
expect(mdOption[1].classList.contains('md-focused')).toBeFalsy();
332+
333+
openSelect(select);
334+
selectMenu = $document.find('md-select-menu');
335+
mdOption = selectMenu.find('md-option');
336+
expect(mdOption[0].classList.contains('md-focused')).toBeFalsy();
337+
expect(mdOption[1].classList.contains('md-focused')).toBeTruthy();
338+
339+
// Clean up the DOM after the test.
340+
body.removeChild(select[0]);
281341
});
282342

283343
it('should remove the input-container focus state', function() {

src/core/services/interimElement/interimElement.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -339,17 +339,17 @@ function InterimElementProvider() {
339339
return interimElement.deferred.promise;
340340
}
341341

342-
/*
342+
/**
343343
* @ngdoc method
344344
* @name $$interimElement.$service#hide
345345
* @kind function
346346
*
347347
* @description
348-
* Removes the `$interimElement` from the DOM and resolves the promise returned from `show`
349-
*
350-
* @param {*} resolveParam Data to resolve the promise with
351-
* @returns a Promise that will be resolved after the element has been removed.
348+
* Removes the `$interimElement` from the DOM and resolves the promise returned from `show`.
352349
*
350+
* @param {*} reason Data to resolve the promise with
351+
* @param {object} options
352+
* @returns {Promise} a Promise that will be resolved after the element has been removed.
353353
*/
354354
function hide(reason, options) {
355355
options = options || {};
@@ -364,8 +364,11 @@ function InterimElementProvider() {
364364
// Hide the latest showing interim element.
365365
return closeElement(showingInterims[showingInterims.length - 1]);
366366

367+
/**
368+
* @param {InterimElement} interim element to close
369+
* @returns {Promise<InterimElement>}
370+
*/
367371
function closeElement(interim) {
368-
369372
if (!interim) {
370373
return $q.when(reason);
371374
}
@@ -384,7 +387,7 @@ function InterimElementProvider() {
384387
}
385388
}
386389

387-
/*
390+
/**
388391
* @ngdoc method
389392
* @name $$interimElement.$service#cancel
390393
* @kind function
@@ -393,8 +396,8 @@ function InterimElementProvider() {
393396
* Removes the `$interimElement` from the DOM and rejects the promise returned from `show`
394397
*
395398
* @param {*} reason Data to reject the promise with
396-
* @returns Promise that will be resolved after the element has been removed.
397-
*
399+
* @param {object} options
400+
* @returns {Promise} Promise that will be resolved after the element has been removed.
398401
*/
399402
function cancel(reason, options) {
400403
var interim = showingInterims.pop();

0 commit comments

Comments
 (0)