Material: ng-focus on md-autocomplete

[YorffoeG]

When focus set to md-autocomplete, ng-focus function not call.

[mrichar1]

Same issue applies to ng-blur as well.

[tolemac]

+1
Perhaps the ng-onblur on md-autocomplete have to be $eval on ng-onblur of internal input.
Actually the internal input have ng-blur="$mdAutocompleteCtrl.blur()"

Te same for ng-focus.

[jelbourn]

Bumping this to 0.12 since more users have been asking for it and it should be relatively straightforward to implement.

[RavenHursT]

+1

A simple modification to the autocompleteDirective and autocomepleteController to expose a directive attribute, something like md-focus and md-blur would allow consumer controllers to operate on those events. as @tolemac pointed out, the internal input already has ng-focus and ng-blur implemented. Hooking in attribute expressions using $parse should be quite simple to implement.

I have a standing PR in https://github.com/angular-ui/ui-select that does something similar: https://github.com/angular-ui/ui-select/pull/1153

[julian-iFactory]

+1 for md-blur on md-autocomplete

[DeGuitard]

+1

[patzick]

+1

[jsenecal]

+1!

[hedder]

+1

[friedolinfoerder]

+1

[SHkreddy]

+1

[abeniwal]

+1

[BenoitClaveau]

+1

[fdomig]

+1

[KarmaCop213]

+1

What I did to still have an "onBlur" event fired:

Created a directive called "autocompleteBlur", the $timeout is important, otherwise the input textbox isn't rendered at that time.

allocateApp.directive('autocompleteBlur', function($timeout){
    return{
        link: function(scope, element, attrs){
            $timeout(clearInputBoxOnBlur, 0);

            function clearInputBoxOnBlur(){
                element.find("#autocomplete-input-id").bind("blur", function(){
                    angular.element(this).val('');
                });
            }
        }
    }
});

Then on the md-autocomplete element, add the newly created directive, and give an id to your input textbox (mine is called "autocomplete-input-id"):

<md-autocomplete
    (...)
    autocomplete-blur
    md-input-id="autocomplete-input-id">
    (...)
</md-autocomplete>

[cleever]

+1

[shichan]

+1

[valtersboze]

+1

[uditalias]

+1

[mwiley63]

+1

[george-i]

+1

[DomenicD]

+1

[wizzzet]

+1

[bluebirdtech]

+1

[madeFromCode]

+1

[SHkreddy]

any update on this ticket, or new work arounds?

[saffabook]

+1

[RavenHursT]

LOL... I'm so glad that I've moved on to React: http://www.material-ui.com/#/components/app-bar

[bsandrow]

I'm not sure why this is marked as an edge-case. Consider the use-case where you want to allow the user to enter _any_ input into a text field, but allow them some pre-defined options via autocomplete. Right now there is a strict separation between searchText and modelValue.

If searchText === modelValue _and_ there is an exact match in the matches list then you'll have a hard time. The matches list will _not_ display because $mdAutocompleteCtrl.hidden will be true. It isn't difficult to create a scenario. Consider that the user types something like 3m into the input. The matches are: 3m, 3M, 3M ESPE. The searchText is 3m, so it matches something in the list. $mdAutocompleteCtrl thinks that it's time to pack everything up, so it renders the list of matches, and hides them from view.

(I'm specifically referring to shouldHide calling hasSelection here.)

Now consider that you want the user to be able to enter 3m2m and save it. My first thought to work around this would be to use ngBlur to copy searchText to modelView when the user explicitly leaves the autocomplete. Without ngBlur though this will not work.

Now I'm sure that "using it as a work around" is your target for features, but by giving users a broader set of tools to work with they can at least work around issues that are not entirely ironed out yet rather than ending up waiting for a fix to the issues, or maintaining their own fork (neither of which are entirely palatable options).

[DeGuitard]

It can be even more common. Imagine you want to show something when the user is editing the auto-complete field, and hide it once he's done. ngBlur would be really handy.

[fernandogomesdf]

+1 for ng-focus

[FBurner]

+2

[robguy21]

+1

When a user moves away from a field I need to run a function to update the available lists of other items in a form.

I don't understand how this is an edge case when so many people are +1ing it and it clearly has thousands of use-cases.

[donwitti]

+1

[simonepri]

I've improved a bit the workaround provided by @KarmaCop213:

(function() {
  'use strict';

  angular
  .module('app')
  .directive('mdBlur', function($timeout) {
    var directive = {
      restrict: 'A',
      link: function(scope, element, attributes){
        $timeout(function(){
          angular.element(element[0].querySelector("input.md-input")).bind("blur", function(){
            $timeout(function() {
               scope.$eval(attributes.mdBlur);
            }, 100);
          });
        },0);
      }
    };

    return directive;
  });

})();

Just change yourCallback with whatever you want.

<md-autocomplete
   (...)
   md-floating-label="Some text"
   md-blur="yourCallback()">
   (...)
</md-autocomplete>

[alois-wever]

+1

[jojogeyer]

+1

[monmon29]

hey.. All of you commuting +1.. I cannot understand how you solve this issue. :(

[RizwanAslam]

+1

[Aniltilanthe]

+10

[dhemonik]

+1

[SHkreddy]

Can we get a dev to actually give us an update on this issue? The ticket has been open for 9 months, there hasn't been one comment by a dev other then to lower the priority or reschedule looking at this issue. Every month there is at least one more +1, and who knows how many people just read this thread and give up because of the poor communication from the devs.

All I want to know is are you ACTIVELY working on this issue or is this ticket just going to remain on the sidelines forever?

[phoenixjun]

+1

[KalpanaAr]

+1

[jpike88]

A million +1s, and the ticket gets put in ... deprecated? Without a reason why?

[tim93422]

It would awful nice to have ng-focus and ng-blur work. Why is this deprecated? Do you need a pull request?

[devversion]

@tim93422 It's not deprecated anymore.

Pull Requests are welcome as always, but please discuss the possible solutions first.

[tim93422]

I'm not really in the position propose a solution yet. If you have a fruitful avenue for me to explore, please let me know. If not, I'll put some time into understanding the issue more fully

[KalpanaAr]

+1

[sachst1000]

+1

[jonasmedeiros]

+1

[Dunos]

+1

[philmoreau]

+1

[BenoitClaveau]

Here is my workaround to override blur function of the autocomplete controller

app.directive('mdBlur', [ "$mdUtil", function($mdUtil) {
    return {
        require: "^mdAutocomplete",
        link: function($scope, $element, $attributes, $mdAutocompleteCtrl) {
            $timeout(function() {
                var input = $element.find("input");
                var element =  $element[0];
                var nativeBlur = $mdAutocompleteCtrl.blur;
                $mdAutocompleteCtrl.blur = function() {
                    nativeBlur.call($mdAutocompleteCtrl);
                    $mdUtil.nextTick(function () {
                        $scope.$eval($attributes.mdBlur, {"$mdAutocomplete": $mdAutocompleteCtrl });
                    });
                };
            });
        }
    };
} ]);

[ibo549]

+1

[rguruprakash]

+1

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[naveenboda1993]

:+1: ng-focus on md-autocomplete

[sergiy-talashko]

@all @here
ngBlur and ngFocus is start working from 1.1.1 version

[mikila85]

+1