typeahead list - don't auto select / highlight first item

[thnk2wn]

Need a way to be able to not auto "select" / highlight the first match in the typeahead list. There are workarounds for direct use of bootstrap such as below. We can make custom changes in our copy of angular ui bootstrap typeahead but then we can't easily upgrade later.

http://stackoverflow.com/questions/9564977/bootstrap-typeahead-dont-autoselect-first-item

http://bibwild.wordpress.com/2013/04/04/overriding-bootstrap-typeahead-to-not-initially-select/

[pkozlowski-opensource]

@thnk2wn I see your use. How would you imagine API for hooking into the typeahead? Feel free to send a PR with the suggested code.

[thnk2wn]

Maybe a true/false attribute something like typeahead-auto-highlight="false". Substituting highlight for select or focus if more clear. Defaults to true.

It may be a bit before I can return to this issue but I can attempt changes, pull request later perhaps. Thanks

[chrisirhc]

I'll take note of this as I work on #888. Gathering more use cases of hooking into controller and what behavior people could possibly want to customize.

[dotlouis]

That would be great if we could have a way to choose which result to highlight on popup. That goes with the option of "none" as @thnk2wn mentioned. That way the user can choose whether or not he wants to use the typeahead list to validate his input field.

1. the user input something in the field
2. the typeahead list pops up with nothing highlighted
3. if the user press enter now it would submit the data in the input field and not the first result of the typeahead list.
   3 bis) if the user goes down, the first element gets highlighted, if then the user goes back up, nothing gets highlighted again and the model is what is in the input.

For now if you have any quick&dirty fix I would gladly take them.
Thanks
Sorry for my english, besides, this is my first comment on github.

[emosenkis]

+1. I also want to allow the user to press enter to take them to a full search page.

[troch]

@Virtual-Dev @emosenkis have a look at issue #1298

[christianacca]

+1 for the behaviour that virtual-dev describes. This is in fact the same default behaviour of the jquery-ui autocomplete widget: http://jqueryui.com/autocomplete/

[alonisser]

👍 for not selecting first item.. or making it optional (and defaults for true)

[dk8996]

👍 this feature is much needed.

[nitinhayaran]

+1

[msafi]

Is the OP asking for a feature or for a bug to be fixed? To me, the current behavior of typeahead is buggy. If the data array of typeahead contains item "Photography" then you can no longer add item "Photo" to the input box because as soon as you start typing "photo", "Photography" item will be selected. Now, when you press enter, it'll submit "Photography". You can get around that if you have an actual submit button on the input field, which you can press with your mouse to get around this bug.

[alonisser]

It's a current feature, which this (#908) issue is in favor of limiting, or
having the ability to turn it off, etc. It's buggy in many ways..

[dmatteo]

👍

I can't help but to append my request for this highlightening to become optional

[pkozlowski-opensource]

OK guys, I've just went over various implementations of autocomplete / typeaheads widgets and it is true that most of them do not higlight / select first match by default. The current behaviour is simply consistent with the behaviour of the original typeahead widget from Bootstrap2.x. But I understand your point.

Here is my proposal: since the typeahead has 2 modes:

• editable (default) - where users can both select an item from the list as well as enter their own value
• non-editable - where users must select an item from the list
  what we could do is to not select a first item when the typeahead is editable and select them first item when the typeahead is non-editable. I think it would give us reasonable defaults.

How does it sound?

[pkozlowski-opensource]

@chrisirhc from the last hangout I remember that you've got quite a lot on your plate (animations, typeahead ctrl, tooltips). Maybe we should split this between ourselves?

[msafi]

@pkozlowski-opensource sounds reasonable to me!

[dmatteo]

Yeah, it would be great
On Jan 25, 2014 6:50 PM, "MK Safi" [email protected] wrote:

@pkozlowski-opensource https://github.com/pkozlowski-opensource sounds
reasonable to me!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/908#issuecomment-33294982
.

[alonisser]

@pkozlowski-opensource
looks great!

[troch]

@pkozlowski-opensource I agree with editable => do not highlight / non-editable => highlight

[flatsteve]

@pkozlowski-opensource This would be a great a feature. Look forward to seeing it implemented.

[biagidp]

@pkozlowski-opensource Yes please for editable: no default, non-editable: highlight!

[davidch]

+1, please!

[davelosert]

+1, i definitly need this.

[andremiguelaa]

+1!

[quicksnap]

+1.. we may have to fork until we have this! Thanks for all your work so far, it's been great!

[Sljubura]

+1

[vitkoma]

+1

[bettysteger]

a very very ugly quickfix in the HTML would be:

typeahead="state for state in (states.length ? [$viewValue].concat(states) : [])"

[parth-j-gandhi]

+1 - need this for my app as well.
Thank you for the workarounds in the meantime.

[thnk2wn]

Seeing as it has been almost a year with no traction on this I implemented the following workaround in ui-bootstrap-tpls-0.10.0.js under .directive('typeahead'. It's probably a temporary hack and might have other issues but it seems to work for our use case in some quick testing

In getMatchesAsync:

    if (inputValue === modelCtrl.$viewValue && hasFocus) {
        if (matches.length > 0) {
            //<CUSTOM>
            //scope.activeIdx = 0; 
            scope.activeIdx = -1; 
            //</CUSTOM>

and inside element.bind('keydown', function (evt)

else if (evt.which === 13 || evt.which === 9) {
          scope.$apply(function () {
              if (scope.activeIdx != -1) { //<CUSTOM>
                  scope.select(scope.activeIdx);
              } // </CUSTOM>
          });

[rickschmidt]

I also needed the ability to not auto select the first option. I have a version that allows tabbing out of the current input field still keeps the model updated with the current view value. I'll circle back and try to correct the tests. rickschmidt@371d1af

[alonbardavid]

I made a decorator that can add will prevent the first item from being auto-selected. It's a hack until a native solution is added, but I prefer it over manually editing the ui-bootstrap code.

.config(["$provide", function ($provide) {
      /**
       * decorates typeahead directive so that it won't autoselect the first element.
       * This is a temporary fix until ui-bootstrap provides this functionality built-in.
       */
      $provide.decorator("typeaheadDirective", ["$delegate","$timeout",function($delegate,$timeout){

        var prevCompile = $delegate[$delegate.length -1].compile;
        $delegate[$delegate.length -1].compile = function(){
          var link = prevCompile.apply($delegate,Array.prototype.slice.call(arguments,0));

          return function(originalScope,elem,attr) {
            var result = link.apply(link,Array.prototype.slice.call(arguments,0));
            //the link creates a new child scope, we need to have access to that one.
            var scope = originalScope.$$childTail;
            var prevSelect = scope.select;

            scope.select = function(activeIdx){
              if (activeIdx < 0) {
                scope.matches = [];
                elem.attr('aria-expanded', false);
                $timeout(function() { elem[0].focus(); }, 0, false);
              } else {
                prevSelect.apply(scope, Array.prototype.slice.call(arguments, 0));
              }
            };
            //we don't have access to a function that happens after getMatchesAsync
            //so we need to listen on a consequence of that function
            scope.$watchCollection("matches",function(){
              scope.activeIdx = -1;
            });
            return result;
          }
        };
        return $delegate;
      }]);
    }]);

[ahocquet]

Any ETA on releasing this feature ?

[ndubbaka]

+1

[azevedo]

+1

[dahle]

+1

[ldez]

+1

[brianfeister]

+1. And hat tip to @Illniyar for generously sharing.

[jeffwhelpley]

+1. Thanks, @Illniyar for the workaround, but this really needs to be fixed in the component.

[olecrivain]

+1. And thanks for the workarounds in the meantime.

[aboelnaga]

+1

[softwaredoug]

+1

[ghost]

+1

[mikhae1]

+1

[wkonkel]

Just submitted pull request #2916 to add option for typeahead-focus-first="false"

[lekhnath]

Urgent here
+1

Would like to thank @msafi for providing a link to such a clever and efficient work around.

[ionox0]

+11

[icfantv]

@ionox0, please do not simply add +1 to issues without additional information that would benefit the conversation. only adding the +1 adds no intrinsic value and only serves to clutter up the thread.

[Artistan]

+1 shows that there is additional people that would use the same solution if it was provided, how is this a bad thing.

To be specific, I would use it to allow for our search to just jump to the advanced search vs. having an autocomplete jumping to a page or other filtered advanced search based on the selected value (click on, not Enter). Enter would just "do a search"

[Artistan]

https://codepen.io/Artistan/pen/LywrXj

This makes a dataset based on the current input query be the first option.