Angular-bootstrap typeahead + ng-click/ng-focus

Question

In my app I use angular-bootstrap typeahead component, this way:

<input type="text" ng-model="selected" placeholder="Start typing to select an object" uib-typeahead="obj as obj.name for obj in objectList | filter:{name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0" />

Everything works well, but users feel it is inconvenient to focus & clear the input field to see the full list of suggestions again. So I want to add a feature: clear the input field once user focuses it and show the suggestion list again. But doing it the naive way:

<input ... ng-click="selected = null;" />

or

<input ... ng-focus="selected = null;" />

doesn't work - typeahead simply stops working. Is there any solution? Thank you.

Have a look at the second answer from this question: http://stackoverflow.com/questions/20879773/how-angular-ui-typeahead-trigger-when-focus. — Fjut, Nov 27 '16 at 17:32
@Fjut this sort of works - with minor amendments, thank you. — Dmitriy Khudorozhkov, Nov 28 '16 at 14:04

score 0 · Answer 1 · answered Nov 28 '16 at 14:00

Probably the simplest solution would be to introduce the following directive for that purpose:

.directive('resetTypeahead', function () {
    return {
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
        element.bind('click', function (e) {
          var viewValue = ngModel.$viewValue;
          if (viewValue) {
            ngModel.$setViewValue('');
            ngModel.$render();
          }
        });
      }
    }
  })

Demo: plunker

Angular-bootstrap typeahead + ng-click/ng-focus

1 Answers1