NbAutocomplete is not working on nebular 9.0.0

[hexdecimal16]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:
Nbautocomplete is not working on nebular 9.0.0 and angular 13. The issue is that the dropdown is not shown until user clicks the input again,
Expected behavior:
Suggestion dropdown should show as the user types letter.

Steps to reproduce:
Initialise an angular project with version 13 and nebular 9.0.0 and try to use nbautocomplete where filtering is done serverside.

Other information:

npm, node, OS, Browser

node: v16.13.1
npm: 8.2.0

Angular, Nebular

"dependencies": {
    "@angular/animations": "~13.0.3",
    "@angular/cdk": "^13.0.3",
    "@angular/common": "~13.0.3",
    "@angular/compiler": "~13.0.3",
    "@angular/core": "~13.0.3",
    "@angular/forms": "~13.0.3",
    "@angular/localize": "^13.0.3",
    "@angular/platform-browser": "~13.0.3",
    "@angular/platform-browser-dynamic": "~13.0.3",
    "@angular/platform-server": "~13.0.3",
    "@angular/router": "~13.0.3",
    "@apollo/client": "^3.5.5",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@nebular/eva-icons": "9.0.0",
    "@nebular/theme": "^9.0.0",
    "@ng-bootstrap/ng-bootstrap": "^12.0.0-beta.4",
    "@ngneat/hot-toast": "^4.0.0",
    "@ngneat/overview": "^3.0.0",
    "@nguniversal/express-engine": "^13.0.1",
    "angular2-multiselect-dropdown": "^5.0.4",
    "angular2-smart-table": "^2.0.8",
    "apexcharts": "^3.31.0",
    "apollo-angular": "^2.6.0",
    "aws-amplify-angular": "^6.0.26",
    "bootstrap": "^4.6.0",
    "eva-icons": "^1.1.3",
    "express": "^4.15.2",
    "graphql": "^16.0.1",
    "i": "^0.3.7",
    "jquery": "^3.6.0",
    "lodash-es": "^4.17.21",
    "lottie-web": "^5.8.1",
    "ng-apexcharts": "^1.6.0",
    "ng-validate-equal": "^6.0.1",
    "ng2-completer": "^9.0.1",
    "ngx-guided-tour": "^1.1.11",
    "ngx-lottie": "^8.0.1",
    "ngx-pagination": "^5.1.1",
    "npm": "^8.2.0",
    "popper.js": "^1.16.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.1",
    "unique-names-generator": "^4.6.0",
    "zone.js": "~0.11.4"
  },

[katebatura]

Hi! Please, make sure that it is not your case: #2852 (comment).
If it's not, could you provide Stackblitz example, please.

[gun2rin]

Hi! Please, make sure that it is not your case: #2852 (comment). If it's not, could you provide Stackblitz example, please.

Hi! Try start to enter any symbols in field. 3 or 4 symbols. Nothing happens. Then click on the field and you will see options
stackblitz

[katebatura]

Hi! Try start to enter any symbols in field. 3 or 4 symbols. Nothing happens. Then click on the field and you will see options stackblitz

You should use startWith RxJS operator when you subscribe to formControl valueChanges to make it work:

this.terms$ = this.inputFormControl.valueChanges.pipe(
  startWith(''),
  switchMap((term: string) => this.searchTerms(term))
);

[Nikitas-io]

You should use startWith RxJS operator when you subscribe to formControl valueChanges to make it work

@katebatura This solution does NOT work when you fetch the autocomplete options from a DB. My web app was working as expected before upgrading nebular to 9.0.0 and angular to 13.3.4, but now it has the bug that @hexdecimal16 described. I've tried using startWith('') in my pipe but I still need to click inside the field for the options to appear after I type something, or I need to type something again that still matches my autocomplete options (type something new after my first type event), and only then the options will appear. It's as if the autocomplete dropdown menu is always one step behind what I write. This is REALLY annoying and buggy functionality. I'm not sure if in my case it doesn't work as expected because I fetch the values from a server, but I've double-checked everything from documentation to package versions and it still doesn't work.

Also, the initial autocomplete menu values (this.filteredOptions$ = of(this.options);) do not show up when I click on the input for some reason.

My Typescript:

ngOnInit(): void {
    // Initial options.
    this.options = ['pink', 'comp'];
    // Set the initial options (DOES NOT WORK).
    this.filteredOptions$ = of(this.options);

    this.chooseInput = new FormControl();

    // Detect the value changes in the form input.
    this.filteredOptions$ = this.chooseInput.valueChanges.pipe(
        startWith(''),
        debounceTime(500),
        switchMap(filterString => {
           // Get the options that match the filter string from the DB.
           return this.myService.getOptions(filterString);
        }),
    );
}

My HTML:

<input
      #inputField
      [formControl]="chooseInput"
      (keyup)="newInput($event)"
      nbInput
      type="text"
      name="autocompleteInput"
      placeholder="Filter Query"
      [ngStyle]="{ 'border-color': inputBorderColor }"
      [nbAutocomplete]="auto"/>

<nb-autocomplete #auto (selectedChange)="selectedOption($event)">
      <nb-option *ngFor="let option of filteredOptions$ | async" [value]="option">
        {{ option }}
      </nb-option>
</nb-autocomplete>

[Nikitas-io]

@katebatura So today I updated @nebular/theme to version 10.0.0 and I realized that this bug has not yet been fixed... To make things simpler, I decided to make a video showcasing the bug that I described in detail in my previous comment on this thread. Here it is:

As you can see, setting initial autocomplete options does NOT work and every keystroke is always lagging one step behind the autocomplete results. PLEASE... can someone fix this??

[galvinm]

Same here with @nebular/theme version 10.0.0