Open igxAutoComplete on focus?

[Eralmidia]

I'm having a hard time getting something which should be easy to work. I would like to use a dropdown as an auto complete as per the documentation (https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete) with one exception: I would like the auto complete to open automatically on focus, not after the first character is input.

On the focus event of the input I then call open() on the dropdown. The issue is that this does not seem to respect the position strategy. See this modified stackblitz: https://stackblitz.com/edit/tt6bge?file=src%2Fapp%2Fdata-entries%2Fautocomplete%2Fmovie%2Fmovie.component.html When focusing the input the dropdown opens as a modal instead of connected to the input as per the settings object.

I realize that what I'm actually doing is calling open on the dropdown, and this method accept position strategy as an argument, but' I've tried supplying the settings object to the open method, and this doesn't work either (it's still a moal, and the dropdown now seems to be wildly off its intended position):

How do you set this up correctly, and shouldn't this be more intuitive?

[RivaIvanova]

Hi @Eralmidia,

I have been looking into your question and what I could say is that the IgxDropDownComponent’s open method accepts an optional parameter of type OverlaySettings which provides the modal and target properties. The modal property determines if the overlay should be in modal mode, whereas the target is the starting point where the component should be shown.

Here could be found a modified sample where the abovementioned properties are used, and the result could be observed in the below attachment.

Additionally, clicking on the input will also fire the focus event and this may lead to unwanted behavior. I have included a possible approach where the dropdown is opened only on focus, e.g., on Tab keypress, and not when clicking on the input.

However, if you require the dropdown to be opened upon clicking the input as well, I could suggest the following:

<igx-input-group #inputGroup>
  <label igxLabel for="cinema">Cinema</label>
  <input
    igxInput
    name="cinema"
    type="text"
    [igxAutocomplete]="townsPanel"
    [igxAutocompleteSettings]="settings"
    [(ngModel)]="cinemaSelected"
    (focus)="townsPanel.open(settings)"
    (click)="townsPanel.open(settings)"
  />
</igx-input-group>

@ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true })
public inputGroup!: IgxInputGroupComponent;

public settings: OverlaySettings;

public ngOnInit(): void {
  this.settings = {
    modal: false,
    target: this.inputGroup.element.nativeElement,
    positionStrategy: new ConnectedPositioningStrategy({
      closeAnimation: undefined,
      openAnimation: undefined,
      verticalDirection: VerticalAlignment.Top,
      verticalStartPoint: VerticalAlignment.Top,
    }),
  };
}

I hope it helps implement your requirement.

[Eralmidia]

Thanks, seems to work fine