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

Commit

Permalink
fix(chips): adds better focus handling for chips
Browse files Browse the repository at this point in the history
  • Loading branch information
Robert Messerle committed Apr 20, 2015
1 parent 1435115 commit def6d3a
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 7 deletions.
10 changes: 7 additions & 3 deletions src/components/chips/js/chipDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,17 @@
function MdChip($mdTheming) {
return {
restrict: 'E',
requires: '^mdChips',
compile: compile
require: '^?mdChips',
compile: compile
};

function compile(element, attr) {
element.append(DELETE_HINT_TEMPLATE);
return function postLink(scope, element, attr) {
return function postLink(scope, element, attr, ctrl) {
if (ctrl) angular.element(element[0].querySelector('.md-chip-content'))
.on('blur', function () {
ctrl.$scope.$apply(function () { ctrl.selectedChip = -1; });
});
element.addClass('md-chip');
$mdTheming(element);
};
Expand Down
21 changes: 19 additions & 2 deletions src/components/chips/js/chipsController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,11 +304,20 @@
};

MdChipsCtrl.prototype.onFocus = function () {
var input = this.$element[0].querySelectorAll('input')[0];
var input = this.$element[0].querySelector('input');
input && input.focus();
this.resetSelectedChip();
};

MdChipsCtrl.prototype.onInputFocus = function () {
this.inputHasFocus = true;
this.resetSelectedChip();
};

MdChipsCtrl.prototype.onInputBlur = function () {
this.inputHasFocus = false;
};

/**
* Configure event bindings on a user-provided input element.
* @param inputElement
Expand All @@ -329,7 +338,8 @@
inputElement
.attr({ tabindex: 0 })
.on('keydown', function(event) { scope.$apply(function() { ctrl.inputKeydown(event); }); })
.on('focus', function () { ctrl.selectedChip = -1; });
.on('focus', function () { this.$scope.$apply(this.onInputFocus.bind(this)); }.bind(this))
.on('blur', function () { this.$scope.$apply(this.onInputBlur.bind(this)); }.bind(this));
};

MdChipsCtrl.prototype.configureAutocomplete = function(ctrl) {
Expand All @@ -339,5 +349,12 @@
this.resetChipBuffer();
}
}.bind(this));
this.$element.find('input')
.on('focus', function () { this.$scope.$apply(this.onInputFocus.bind(this)); }.bind(this))
.on('blur', function () { this.$scope.$apply(this.onInputBlur.bind(this)); }.bind(this));
};

MdChipsCtrl.prototype.hasFocus = function () {
return this.inputHasFocus || this.selectedChip >= 0;
};
})();
9 changes: 7 additions & 2 deletions src/components/chips/js/chipsDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
<md-chips-wrap\
ng-if="!$mdChipsCtrl.readonly || $mdChipsCtrl.items.length > 0"\
ng-keydown="$mdChipsCtrl.chipKeydown($event)"\
ng-class="{ \'md-focused\': $mdChipsCtrl.hasFocus() }"\
class="md-chips">\
<md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
index="{{$index}}"\
Expand All @@ -118,7 +119,8 @@
placeholder="{{$mdChipsCtrl.getPlaceholder()}}"\
aria-label="{{$mdChipsCtrl.getPlaceholder()}}"\
ng-model="$mdChipsCtrl.chipBuffer"\
ng-focus="$mdChipsCtrl.resetSelectedChip()"\
ng-focus="$mdChipsCtrl.onInputFocus()"\
ng-blur="$mdChipsCtrl.onInputBlur()"\
ng-keydown="$mdChipsCtrl.inputKeydown($event)">';

var CHIP_DEFAULT_TEMPLATE = '\
Expand Down Expand Up @@ -249,7 +251,10 @@
// configure the controller.
if (chipInputTemplate != CHIP_INPUT_TEMPLATE) {
$timeout(function() {
if (chipInputTemplate.indexOf('<md-autocomplete') === 0) mdChipsCtrl.configureAutocomplete(element.find('md-autocomplete').controller('mdAutocomplete'));
if (chipInputTemplate.indexOf('<md-autocomplete') === 0)
mdChipsCtrl
.configureAutocomplete(element.find('md-autocomplete')
.controller('mdAutocomplete'));
mdChipsCtrl.configureUserInput(element.find('input'));
});
}
Expand Down

2 comments on commit def6d3a

@TalPasi
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when a chip is selected, clicking another chip causes a slight flicker of the bottom border

One way to remove this flickering is to call the $mdChipsCtrl.selectChip($index) on ng-focus instead of ng-click

var MD_CHIPS_TEMPLATE = '\
      <md-chips-wrap\
          ng-if="!$mdChipsCtrl.readonly || $mdChipsCtrl.items.length > 0"\
          ng-keydown="$mdChipsCtrl.chipKeydown($event)"\
          ng-class="{ \'md-focused\': $mdChipsCtrl.hasFocus() }"\
          class="md-chips">\
        <md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
            index="{{$index}}"\
            ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index}">\
          <div class="md-chip-content"\
              tabindex="-1"\
              aria-hidden="true"\
              ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
              md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
          <div class="md-chip-remove-container"\
              md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
        </md-chip>\
        <div ng-if="!$mdChipsCtrl.readonly && $mdChipsCtrl.ngModelCtrl"\
            class="md-chip-input-container"\
            md-chip-transclude="$mdChipsCtrl.chipInputTemplate"></div>\
        </div>\
      </md-chips-wrap>';

I have changed *ng-clickng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"*

@robertmesserle
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@TalPasi Good call, added this change to master. 👍

Please sign in to comment.