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

Commit

Permalink
fix(chips): fix chips focus functionality
Browse files Browse the repository at this point in the history
- The normal mobile devices won't trigger the focus on the element.
Focusing the element on `ng-click` fixes that issue.
Through keeping and redirecting to `ng-focus` it's still possible to select chips through keyboard
- At the moment, we only reset the selectedChip variable but we don't
  apply that to the view, so we need to run an async evaluation.

Fixes #5897 Fixes #5662
  • Loading branch information
devversion committed Feb 10, 2016
1 parent 437a308 commit 1feea52
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 2 deletions.
54 changes: 53 additions & 1 deletion src/components/chips/chips.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ describe('<md-chips>', function() {
scope.items = [];
});

it('should not add a new chip if the max-chips limit is reached', function() {
it('should not add a new chip if the max-chips limit is reached', function () {
var element = buildChips('<md-chips ng-model="items" md-max-chips="1"></md-chips>');
var ctrl = element.controller('mdChips');

Expand Down Expand Up @@ -513,6 +513,58 @@ describe('<md-chips>', function() {
expect(ctrl.chipBuffer).toBe('Test 2');
expect(scope.items.length).not.toBe(2);
});
});

describe('focus functionality', function() {
var element, ctrl;

beforeEach(function() {
element = buildChips(CHIP_SELECT_TEMPLATE);
ctrl = element.controller('mdChips');
document.body.appendChild(element[0]);
});

afterEach(function() {
element.remove();
element = ctrl = null;
});

it('should focus the chip when clicking / touching on the chip', function() {
ctrl.focusChip = jasmine.createSpy('focusChipSpy');

var chips = getChipElements(element);
expect(chips.length).toBe(3);

chips.children().eq(0).triggerHandler('click');

expect(ctrl.focusChip).toHaveBeenCalledTimes(1);
});

it('should focus the chip through normal content focus', function() {
scope.selectChip = jasmine.createSpy('focusChipSpy');
var chips = getChipElements(element);
expect(chips.length).toBe(3);

chips.children().eq(0).triggerHandler('focus');

expect(scope.selectChip).toHaveBeenCalledTimes(1);
});

it('should blur the chip correctly', function() {
var chips = getChipElements(element);
expect(chips.length).toBe(3);

var chipContent = chips.children().eq(0);
chipContent.triggerHandler('focus');

expect(ctrl.selectedChip).toBe(0);

chipContent.eq(0).triggerHandler('blur');

scope.$digest();

expect(ctrl.selectedChip).toBe(-1);
});

});

Expand Down
3 changes: 2 additions & 1 deletion src/components/chips/js/chipDirective.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ function MdChip($mdTheming, $mdUtil) {

if (ctrl) angular.element(element[0].querySelector('.md-chip-content'))
.on('blur', function () {
ctrl.selectedChip = -1;
ctrl.resetSelectedChip();
ctrl.$scope.$applyAsync();
});
};
}
Expand Down
1 change: 1 addition & 0 deletions src/components/chips/js/chipsDirective.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
<div class="md-chip-content"\
tabindex="-1"\
aria-hidden="true"\
ng-click="!$mdChipsCtrl.readonly && $mdChipsCtrl.focusChip($index)"\
ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
<div ng-if="!$mdChipsCtrl.readonly"\
Expand Down

0 comments on commit 1feea52

Please sign in to comment.