Open dropdown when we already on focus

[marciomsm]

Are there some way to open the dropdown again when we already on focus and the mouse cursor is blinking?

I mean, when I am on focus and I want to open the dropdown again, I need to remove the focus and then focus on field again.

[oferh]

yes, there is an open method for the component - see the demo

[marciomsm]

@oferh I got this error Cannot read property 'open' of undefined. Do you have any ideia?

import { CompleterService, CompleterData, CompleterItem, CompleterCmp } from 'ng2-completer';

@ViewChild('openCloseExample') private openCloseExample: CompleterCmp;

public onOpened(isOpen: boolean) {
      this.isOpen = isOpen;
  }

  public onToggle() {
      if (this.isOpen) {
          this.openCloseExample.close();
      } else {
          this.openCloseExample.open();
          this.openCloseExample.focus();
      }
  }

[oferh]

can you also add you html?

[marciomsm]

Hi @oferh, here it is:

              <ng2-completer name="list" class="custom-dropdown"
                          [(ngModel)]="dataStr"
                          [inputName]="'list'"
                          [openOnFocus]="true"
                          (opened)="onOpened($event)"
                          [disableInput]="!isLoaded"
                          [datasource]="dataList"
                          [openOnFocus]="true"
                          [minSearchLength]="0"
                          [placeholder]="'Choose a item'"
                          (selected)="getStationSelected($event)">
              </ng2-completer>
              <span class="toggle-dropdown" (click)="onToggle()"></span>

[oferh]

try this:

              <ng2-completer #openCloseExample
                          name="list"
                          class="custom-dropdown"
                          [(ngModel)]="dataStr"
                          [inputName]="'list'"
                          [openOnFocus]="true"
                          (opened)="onOpened($event)"
                          [disableInput]="!isLoaded"
                          [datasource]="dataList"
                          [openOnFocus]="true"
                          [minSearchLength]="0"
                          [placeholder]="'Choose a item'"
                          (selected)="getStationSelected($event)">
              </ng2-completer>
              <span class="toggle-dropdown" (click)="onToggle()"></span>

[marciomsm]

Hi @oferh this works for me.

One question, if I have more then one dropdown in my template, I need to duplicate the my code, right?

Thanks.

[oferh]

yes, but you can always create a function that gets the relevant component

[MobackChetanKumar]

How to debug the dropdown I want to change the background color of the dropdown and color of the dropdown values?