Ngx-bootstrap: fix(typeahead): it is not possible to NOT select any option using keys for submit

[ghost]

Typeahead works fine. I type and get completion suggestions - but it seems to be impossible to NOT select any.

For example:
I type "lorem ip" in a search-input field and get a suggestion for "lorem ipsum".
I am not able to just submit "lorem ip". There is always a preselected option,
that gets submitted on enter.

[thegris]

This is a significant blocker for our team. We need to be able to select from typeahead OR type in a custom value that is not in the dropdown.

We need to be able to submit "Chef" even though "Chef Manager" is in the list of suggestions.

[derekshi]

This is a big issue. The actual problem is the typeahead always auto-select the first item. If user press 'enter', the first item gets into the input box instead of what user has typed. Very annoying behavior for lots of users. We need to disable typeahead auto-select.

[dcale]

Are there any plans to fix this? I have the same usecase like @thegris - Allow users to add "custom" text or select an item in the list...

[joebri]

+1 - exactly the same issue here. I know you can esc or tab away but that's not a good user experience.

[andy-dev]

+1 - same problem

[andy-dev]

I worked out a very hacky and temporary fix. Probably not best practice, but for prototyping and client is happy, basically I am adding whatever is on my input to be added to the first item my array I display.

 this.dataSource = Observable
      .create((observer: any) => {
        let trimSearchTerm = this.searchTerm.trim();
        this.searchService.typeahead(trimSearchTerm, this.typeahedSuggest)
          .subscribe(({data}) => {
            if(this.searchTerm===""){
              observer.next(data.searchSuggestion)
            } else {
              let newSuggestionArray = data.searchSuggestion.slice(0);
              newSuggestionArray.unshift(this.searchTerm);
              observer.next(newSuggestionArray);
            }
          })
      })
  }

[EricBPower]

+1 this is also a problem for me.
I would like the option to only use a typeahead option if the dropdown option is clicked.
When I have a (keyup.enter) on the associated input field that should allow entering non-matched input it is instead using the first item in the matches.

Additional info: [typeaheadFocusFirst]="false" doesn't do anything

[SnakeB]

+1 this is also a problem for us. We want to implement a full text search like google and because of that it is important that no option is selected if the enter key is pressed. @EricBPower it looks like [typeaheadFocusFirst]="false" is not implemented yet -> https://github.com/valor-software/ngx-bootstrap/blob/development/src/typeahead/typeahead.directive.ts

[wolfgang-lausenhammer]

+1
@SnakeB that's exactly our use case as well. I'd like to see this feature implemented too.

[pthieu]

+1 here.
I have a search input that fires an event on keyup.enter, in my dropdown, there are multiple types of suggestions, i.e. tag or text. If a tag is selected, I do not want to do the standard keyup.enter search. If text is selected, I do not want to do invoke the tag search method.

In addition to @andy-dev's hack (https://github.com/valor-software/ngx-bootstrap/issues/1281#issuecomment-280121765), I also had to put a keydown.arrowDown event to set variable so that if it's true, we don't do the same behaviour on keyup.enter

[rimshot5870]

+1 Moved from ng2-bootstrap to ngx-bootstrap for angular-cli project, and missing this feature.

[felikf]

There is some PR in here: https://github.com/valor-software/ngx-bootstrap/pull/1833/files

[jahirgarzon]

Hi guys,

I came across the same issue. But how I dealt with it in my situation is that I used another variable as a place holder to store my query. then on the typeahead-on-select i call a function which sets my model equal to the value of my place holder.

my html

            placeholder="search..."  
            ng-model="activityCtrl.allQuery"
            uib-typeahead="item for item in activityCtrl.getDetails($viewValue)"
            typeahead-loading="loading"
            typeahead-on-select="activityCtrl.setSelect()"

            class="form-control"
           >

my controller

vm.selectPlaceHolder=query



function _setSelect(){

        console.log(vm.allQuery)
       vm.allQuery=vm.selectPlaceHolder
    }

cheerios

[maurizi]

I think https://github.com/valor-software/ngx-bootstrap/pull/3983 will fix this issue.

[oivindth]

+1

[labrada83]

Any updates on this?

[ludmilanesvitiy]

This feature is already implemented and presented on the demo page:
https://valor-software.com/ngx-bootstrap/#/typeahead#first-item-active
https://valor-software.com/ngx-bootstrap/#/typeahead#selected-first-item

[MatteoMeil]

With [typeaheadIsFirstItemActive]="false" the only way to close the popup and focus another input is clicking in a blank space or directly onto the input.
I expect I could use Tab to focus another input and, of course, the model not to be filled with any value from prediction results.
Am I missing something, i.e. it's the desired behavior, or it's a bug?