angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

feat(contact-chips): add support for ng-blur and ng-focus #11137

Open vaclavpavlicek opened 6 years ago

vaclavpavlicek commented 6 years ago

Bug, feature request, or proposal:

Feature

What is the expected behavior?

ngBlur working with mdContactChips.

What is the current behavior?

ngBlur isn't working with mdContactChips.

CodePen and steps to reproduce the issue:

<md-contact-chips
        ng-model="ctrl.contacts" 
        md-contacts="ctrl.querySearch($query)"
        md-contact-name="name"
        md-contact-image="image"
        md-contact-email="email"
        md-require-match="true"
        md-highlight-flags="i"
        filter-selected="ctrl.filterSelected"
        placeholder="To"
        ng-blur="ctrl.onBlur()">
    </md-contact-chips>

Method ctrl.onBlur isn't called because ngBlur isn't supported.

What is the use-case or motivation for changing an existing behavior?

I want to validate mdContactChips, but I want to display error message after user leaves mdContactChips. I don't want to display error message all the time when mdContactChips is empty.

Which versions of AngularJS, Material, OS, and browsers are affected?

AngularJS 1.6.9 AngularJS Material 1.1.8

Is there anything else we should know? Stack Traces, Screenshots, etc.

No

Splaktar commented 6 years ago

There is ongoing work to support md-add-on-blur for mdContactChips: https://github.com/angular/material/pull/10009. But it looks like that won't solve your use case here since you want to call a handler function, not actually add the chip?

It looks like this feature (https://github.com/angular/material/issues/6301) was requested in the past, but closed as part of the deprecation effort as "won't fix".

Please provide a CodePen demo that shows ng-blur not working with mdContactChips.

Then we would be happy to accept a pull request that adds support for ng-blur (and ng-focus) to mdContactChips.

vaclavpavlicek commented 6 years ago

@Splaktar here is CodePen demo: https://codepen.io/vendasky/pen/XEyLOw. If you click to text input, you'll see input focus message. If text input loses input, you'll see blur message. This doesn't work for md-contact-chips.