md-chips with autocomplete: pressing enter to select not working with angular 1.4

[webley]

I'm using angular material 0.10.1-rc2 and angular 1.4.2. Selecting items in the autocomplete using the mouse is working fine. However, selecting an item by pressing "enter" results in an empty or malformed chip. This is happening with the demo autocomplete chips as well as contact chips.

http://codepen.io/davidwolsey/pen/bdxewm

[matteocarde]

I had the same problem. Put md-autocomplete-snap="" md-require-match="" in the md-chips

[webley]

Thanks smile, but the codepen demo already has both of those set, and in fact I don't want to use md-require-match. This is just behaviour that's changed from angular 1.3 to 1.4.

[sousandrei]

(correct me if im wrong, but as i have the same problem and want to support this issue i should comment +1?)
+1

[stevenmiles]

Having the same issue with 0.10.1-rc2 and angularjs 1.4.3.

[yigaldviri]

+1

[ilanbiala]

Still having this issue with rc3 and 1.4.3.

[gauravbhavsar]

Same issue in md-contact-chips with angular-material v0.10.0-master-cd3e8a1 and angularJS v1.4.2

[huijari]

+1

[schmkr]

+1 (using angular: 1.4.3 and angular-material: 0.10.1-rc3-master-eda4782)

[schmkr]

Yesterday's released 0.10.1-rc4 still has this issue. You can see for yourself on the demos page and start typing a name in the Contact Chips section. When you select a contact with a mouse click, everything works like before. However, when you press enter/return to confirm a autocomplete suggestion, the result is an empty chip.

[andreialecu]

#3900 is related.

[davidlmiller21]

Issue has to do with this:

MdChipsCtrl.prototype.inputKeydown = function(event) {
  var chipBuffer = this.getChipBuffer();
  switch (event.keyCode) {
    case this.$mdConstant.KEY_CODE.ENTER:
      if (this.$scope.requireMatch || !chipBuffer) break;
      event.preventDefault();
      this.appendChip(chipBuffer);
      this.resetChipBuffer();
      break;
    case this.$mdConstant.KEY_CODE.BACKSPACE:
      if (chipBuffer) break;
      event.stopPropagation();
      if (this.items.length) this.selectAndFocusChipSafe(this.items.length - 1);
      break;
  }
};

Is the point of enter to make a custom chip from the user input text? Otherwise, this is the simple easy fix to get enter to select the highlighted element:

MdChipsCtrl.prototype.inputKeydown = function(event) {
  var chipBuffer = this.getChipBuffer();
  switch (event.keyCode) {
    case this.$mdConstant.KEY_CODE.ENTER:
      // DO NOTHING
      break;
    case this.$mdConstant.KEY_CODE.BACKSPACE:
      if (chipBuffer) break;
      event.stopPropagation();
      if (this.items.length) this.selectAndFocusChipSafe(this.items.length - 1);
      break;
  }
};

[ngraef]

@davidlmiller21 The code you removed is needed for chips without autocomplete.

After some debugging, the underlying issue here seems to be that requireMatch isn't being set as expected in the MdChipsDirective scope (from the attribute mdRequireMatch). This causes the chips controller to not break out of the keydown handler, and it ends up appending a chip using the input text (chipBuffer). The chip buffer then gets cleared, which resets the autocomplete's matches. So by the time MdAutocompleteCtrl selects the item (delayed using $mdUtil.nextTick), ctrl.matches is empty and there is no autocomplete item to select.

As shown in this demo (modified to use strings instead of objects), the chip buffer is getting added as a chip. This shows up as () in the original demo because the text chip doesn't have a name or type property.

[houmark]

@ngraef Interesting findings there. Did you manage to make a fix? If you have a chunk of code to potentially correct it I would be happy to test it out :) We are quite bothered by this particular bug as we are using chips quite a lot.

[ngraef]

@houmark After a little more digging, the issue is in chipsController.js line 87:

if (this.$scope.requireMatch || !chipBuffer) break;

The mdChips directive defines bindToController: true, which binds the directive's isolate scope properties to MdChipsCtrl's this _instead of_ $scope. So the simple solution here is to change the above code to:

if (this.requireMatch || !chipBuffer) break;

Now, we also have to declare an explicit true value for mdRequireMatch on mdChips otherwise it will be undefined:

<md-chips md-require-match="true" ... >

So an additional fix is needed in order to maintain the current md-require-match="" syntax, but I personally think having an explicit value is good.

[houmark]

Thanks for that @ngraef, I will give it a spin and provide feedback :)

[ngraef]

I believe there's also an issue here with event propagation. I don't think the keydown event on the autocomplete dropdown should propagate to the chips. In the use case where you don't want md-require-match="true" (e.g. being able to select a predefined tag from the autocomplete list or optionally create a new tag from the input value), this propagation becomes an issue.

[metamatt]

I saw this problem using mdAutocomplete and mdChips together and stepped through the code adding a bunch of logging. The problem I see is that both mdAutocomplete and mdChips attach a keydown event handler, and both of these keydown event handlers run. When you select an entry from the autocomplete dropdown by pressing Enter, mdAutocomplete.keydown calls mdAutocomplete.select which defers most of its work via $mdUtils.nextTick, during which time mdChips.keydown runs and calls resetChipBuffer. When mdAutocomplete.select starts running, the $scope.searchText is valid, but by the time it gets called back via nextTick, the mdChips resetChipBuffer has cleared the mdAutocomplete searchText and handleSearchText has cleared the matches list.

I haven't tried using md-require-match but I don't think I want that behavior anyway.

Near as I can tell, if both keydown event handlers are supposed to run, they should both progress at the same rate -- either both deferred via nextTick or neither deferred.

[typotter]

duplicate of #3475

[jherman]

Still seeing this issue:
https://codepen.io/anon/pen/KdQJpW?editors=101

Type in "ca", cabbage will pop up and be auto selected. Hit 'enter'. You'll see two chips get added - what you searched for and the cabbage chip. Expecting only the cabbage chip.

[houmark]

@jherman Try this codepen that has a different configuration <md-chips md-require-match="true">:
https://codepen.io/houmark/pen/YyeBWo?editors=101

This is a fork of yours and the only change is false to true for the above configuration.

[jherman]

The problem here, is that you can't enter in new chips if they aren't found. I think one of the devs are looking into on #3475. I had to insert a one liner to fix the issue. You can see my remarks there. Thanks!

[houmark]

You didn't say that it was a requirement to be able to add with chips :) In that case you might still have issues as you also have noticed - the fix was only a part fix and hopefully a better one for all use cases will happen at some point...

[ronwong82]

How can we make md-chips with auto complete accept only valid email address? i use md-on-append and try to load contacts (email address) from db and at the same time type email address to add to to the contacts.

[ghost]

md-require-match="true" works for me

[sirlero]

md-require-match="true" works but if you wanna add new items?

[Baloche]

Based on the previous comments, here is a complete fix that worked well for my problem :)

angular.module('material.components.chips')

  // here we need to rewrite the 'inputKeyDown' method of the mdChipsCtrl in order to prevent empty chips when the user hits ENTER.
  .config(function($provide) {
    $provide.decorator('mdChipsDirective', function($delegate) {
      
      // get directive
      var directive = $delegate[0];

      // get compile method
      var oldCompile = directive.compile;

      // rewrite compile method
      directive.compile = function() {

        return {

          // return original postLink method in 'post' attribute
          post: oldCompile.apply(this, arguments),

          // create a preLink method to access controller
          pre: function(scope, element, attrs, ctrls) {

            // get original 'inputKeyDown' method
            var inputKeyDown = ctrls[0].inputKeydown;

            // and rewrite it with the fix
            ctrls[0].inputKeydown = function() {

              // if ENTER key pressed, do the magic trick
              if (event.keyCode === this.$mdConstant.KEY_CODE.ENTER) {
                var chipBuffer = this.getChipBuffer();
              }
              
              // else call original method
              else {
                return inputKeyDown.apply(this, arguments);
              }

            };
          }
        };
      };
      return $delegate;
    });
  });