md-chips: Add a chip onInputBlur

[websirnik]

I think it's a good experience for md-chips to convert outstanding text to a chip when input loses focus.

Here is a use-case when it's relevant. User does not know that he needs to click enter to add a chip. When users clicks "Send email", no email has been captured.

[jproby]

👍

[nitinhayaran]

👍

[reillydavis]

👍

[Nikesh]

👍

[bonatoc]

In the meantime, you can still hack :

MdChipsCtrl.prototype.onInputBlur = function () {
  this.inputHasFocus = false;
  var chipBuffer = this.getChipBuffer();
  if (chipBuffer != "") { // REQUIRED, OTHERWISE YOU'D GET A BLANK CHIP
      this.appendChip(chipBuffer);
      this.resetChipBuffer();
  }
};

This is just replicating what is triggered by ENTER keycode, on MdChipsCtrl.prototype.inputKeydown.

[jestelle]

From the best I can tell, this is not explicitly specified in spec, but I would agree with the suggestion of the reporter.

[jelbourn]

UX decision: Always add on blur

[bonatoc]

Yay!

[zzo]

+1

[maelfrize]

I'm happy about your UX decision. Our users are having the same issues when filling out forms with chips.
Looking forward to your fix :)

[janvandenberg]

+1

[seanconnollydev]

+1

This should be re-opened. I have tried all of the recommended workarounds and some variations of my own and none of them work well with md-autocomplete.

[devversion]

I reopened that issue and we'll work on an attribute, which allows developers to add chips, on input blur.

[jaggedsoft]

+1 Thanks for the hack@jdeanwaite, works awesome!

[jaggedsoft]

@jelbourn Thanks, I tried your commit in 1.1.1 and it works great,
Could you add this directive to md-contact-chips as well please? See: https://codepen.io/jaggedsoft/pen/wzKvrj
Edit: Unnecessary. Same result can be achieved with <md-chip-template>

[madeFromCode]

@devversion Very nice to have this functionality, however...

Using md-add-on-blur with auto-complete breaks the click functionality for the auto-complete list.

Edit: So I was able to fix it by modifying the code to check and see if the auto-complete list item is the new active element. I had to delay it with a 0 second timeout because the blur event fires before the list item becomes the new active element.

  setTimeout(function () { 
    // Only append the chip and reset the chip buffer if the chips and input ngModel is valid.
    if (!document.activeElement.hasAttribute('md-virtual-repeat') && this.addOnBlur && chipBuffer && isModelValid) {
        this.appendChip(chipBuffer);
        this.resetChipBuffer();
    }
    this.fromAutoComplete = false;
  }.bind(this));

It's not as elegant of a solution as I would like, but it works...

[ronbnsim]

+1

[bonatoc]

Did not have time to check it yet, but hasn't this been addressed in 1.1.1 ?
https://github.com/angular/material/blob/master/CHANGELOG.md

bbc6c07

[kabb5]

@bonatoc Yes, the changelog you linked to says "chips: md-add-on-blur functionality (#9095) (bbc6c07), closes #3364"

[mikila85]

+1