how angular ui typeahead trigger when focus

Question

I'm using angular-ui typeahead. How can I trigger the popup items when focus on the input box, not after typing.

Answer 1

I can attest to the issues associated with expanding the UX of the typeahead. While @ueq's solution works, it has trouble releasing focus/clicking. I suggest changing things, specifically how you trigger the open UX.

suggested changes

• open on double click - this solves the issue of click-releasing in @ueq's answer
• check for existing values so as not to overwrite the value - we don't want to accidentally overwrite existing data when we open, so check first then set to a non-valid value to trigger the open.
• change the name of the directive.... go with something more descriptive - considering that ui.bootstrap has already changed their namespace moving from 13.x to 14.x it just makes sense to go with your own name. Since directives can represent both UI &/or UX, it makes sense to name your directive to something that other developers can later track down more easily.

why

When working with a typeahead, people have certain expectations of the UX. Clicking into an input and having something popup can be somewhat jarring and misdirecting. A single click or tab-focus into an input traditionally does nothing other than readying the input for keyboard interaction. A double click generally carries the expectation that something more will happen (e.g. double click a file & close from a select dialog vs. single click to select, then click "ok" to close).

In programming we often try to employ the separation of concerns paradigm to our code. But I think this could be applied also to this particular UX and UX in general. Let the single-click & tab-focusing do what they've done for years and utilize the double-click to expand the UX of the typeahead.

plunker - http://plnkr.co/edit/GGl6X4klzVLKLX62Itbh?p=preview

.directive('typeaheadClickOpen', function($parse, $timeout) {     return {         restrict: 'A',         require: 'ngModel',         link: function($scope, elem, attrs) {             triggerFunc = function(evt) {                 var ctrl = elem.controller('ngModel'),                     prev = ctrl.$modelValue || '';                 if (prev) {                     ctrl.$setViewValue('');                     $timeout(function() {                         ctrl.$setViewValue(prev);                     });                 } else {                     ctrl.$setViewValue(' ');                 }             }             elem.bind('dblclick', triggerFunc);         }     } }) 

Answer 2

Hi I had the same issue and with this github discussion I was able to figure it out: Setup a directive that calls $setViewValue like

.directive('typeahead', function () {     return {         require: 'ngModel',         link: function (scope, element, attr, ctrl) {             element.bind('click', function () {                 ctrl.$setViewValue(' ' );             });             element.bind('blur', function () {                 ctrl.$setViewValue('');             });         }     }; }); 

and add it to your input:

<input type="text" [...] typeahead> 

Result (I created a plkr: http://plnkr.co/edit/Si6tFK2AammZy1HqEQzA):

Hope that helps :)