Material: chips: unwanted re-focus of last chip after blur

[lucascnr]

After upgrading the Angular Material from version 1.1.1 to 1.1.4, the md-chips are not working as before.

Type a string in the entry and then click outside, the focus returns to the input.

I do not want this to happen.

With Angular Material 1.1.1:

https://fiddle.jshell.net/c1osj4p7/1/

With Angular Material 1.1.4:

https://fiddle.jshell.net/nxvp1mdu/1/

Can anybody help me, please?

[henrymana]

I don't see that. I tried it on macos sierra with the latest version of chrome and firefox.

Could you please fill in the additional details requested by the issue template?

AngularJS Versions: *

• AngularJS Version:

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

[lucascnr]

In mdChipsCtrl there is a boolean variable responsible for returning focus to the entry called shouldFocusLastChip.

I overwritten the function by changing the value of this variable with the following directive:

angular.module('myApp').directive('mdChips', function () {
  return {                                                                   
    restrict: 'E',                                                          
    require: 'mdChips', // Extends the original mdChips directive           
    link: function (scope, element, attributes, mdChipsCtrl) {              
      mdChipsCtrl.appendChip = function (newChip) {
        // Set to FALSE                                  
        this.shouldFocusLastChip = false;                                                                    

        if (this.useTransformChip && this.transformChip) {                  
          var transformedChip = this.transformChip({'$chip': newChip});     

          // Check to make sure the chip is defined before assigning it, otherwise, we'll just assume
          // they want the string version.                                  
          if (angular.isDefined(transformedChip)) {                         
            newChip = transformedChip;                                      
          }                                                                 
        }                                                                   

        // If items contains an identical object to newChip, do not append  
        if (angular.isObject(newChip)){                                     
          var identical = this.items.some(function(item){                   
            return angular.equals(newChip, item);                           
          });                                                               
          if (identical) return;                                            
        }                                                                   

        // Check for a null (but not undefined), or existing chip and cancel appending
        if (newChip === null || this.items.indexOf(newChip) + 1) return;    

        // Append the new chip onto our list                                
        var length = this.items.push(newChip);                              
        var index = length - 1;                                             

        // Update model validation                                          
        this.ngModelCtrl.$setDirty();                                       
        this.validateModel();                                               

        // If they provide the md-on-add attribute, notify them of the chip addition
        if (this.useOnAdd && this.onAdd) {                                  
          this.onAdd({ '$chip': newChip, '$index': index });                
        }                                                                   
      };                                                                    
    }                                                                       
};

thank you @henrymana !

[caseyjhol]

@topherfangio @DevVersion @jelbourn Thoughts? This issue was introduced in commit f18cb2beaa7e481171692345cdb6e25fe177e798. With md-add-on-blur enabled, clicking outside mdChips or selecting another input element results in the previously focused mdChips being highlighted again. This is especially jarring on a mobile device (e.g. type in some text for the chip, scroll down to the next form element, select it, and then the chip is added but mdChips is then scrolled back into position and focused). It's also not possible to tab to the next element. I really feel like if md-add-on-blur is enabled, ctrl.shouldFocusLastChip should always be false. The element was purposely unfocused, it seems counter-intuitive to then refocus is again.

[Splaktar]

Another of a number of regressions to chips introduced in 1.1.2 as part of the a11y improvements.