Components: Autocomplete - Need way to set first option as active manually

[lcecil]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

Should be able to manually/programmatically set the first option in the autocomplete panel as active and select when the user presses enter.

What is the current behavior?

User must either use the down key or hover with the mouse on the option to make it active.

What are the steps to reproduce?

N/A

What is the use-case or motivation for changing an existing behavior?

Our users are going to be limited to selecting only options from the autocomplete. We're experiencing problems where users are either typing in a partial value or the full value, hitting the enter key, and not understanding why that option isn't being selected.

See attached images

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular - 4.4.6
Material - 2.0.0-beta.12

Is there anything else we should know?

Seems similar to this issue, but not quite: https://github.com/angular/material2/issues/3334
The material Select component has this feature, so it doesn't seem too far of a stretch to have the same behavior for the autocomplete as an optional setting.

[josephperrott]

You actually can do this already by acting on events on the input underlying MatAutocomplete.

In your component's html:

<input matInput placeholder="Pick a state" aria-label="State" [matAutocomplete]="auto" 
      [formControl]="stateCtrl" (keyup.enter)="chooseFirstOption()">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let state of filterStates(this.stateCtrl.value)" [value]="state">{{state}}</mat-option>
</mat-autocomplete>

In your component class:

@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
  styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  filteredStates: Observable<any[]>;
  states: string[] = [Arkansas', 'California', 'Florida',  'Texas'];
  @ViewChild(MatAutocomplete) matAutocomplete: MatAutocomplete;

  filterStates(name: string): string[] {
    return this.states.filter(state =>
      state.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

  chooseFirstOption(): void {
    this.matAutocomplete.options.first.select();
  }
}

The chooseFirstOption method will select the first item in the current autocomplete options.

[lcecil]

Thanks, that helps with the selection, but there's no indication that the user is going to select the first one - is there an easy way to also apply the .mat-active class to the first option?

I've tried several ways, and cannot figure it out.

Thanks much.

[lcecil]

Nevermind, I got it.

this.matAutocomplete.options.first.setActiveStyles();

Thanks again!

[lcecil]

Hi @josephperrott . I might need you to re-open this issue.

The solutions above only solve the first part of the feature request. I got the select working, and I can manually set the active styles to the first option, but I think it still requires me to write my own KeyManager. Even though the first option is active, when I press the down arrow, the Autocomplete still wants to make the first option active - it doesn't adjust the index accordingly.

The typeahead using bootstrap and AngularJS has the exact desired behavior for a better working example: https://angular-ui.github.io/bootstrap/#!#typeahead

Let me know if you need more clarity, or if there's a solution for this second half.

[smitelij]

Hey @lcecil ,

I wanted the same behavior you were after and got it working with a few small tweaks:

in component.ts:

highlightFirstOption(event): void {
    if (event.key == "ArrowDown" || event.key == "ArrowUp") {
      return;
    }
    this.matAutocomplete._keyManager.setFirstItemActive();
  }

in component.html:

(keyup)="highlightFirstOption($event)"

[lcecil]

Hi @smitelij,

Thanks for the suggestion, I'll give it a try. Although I'm a little surprised you can access the _keyManager, as I would assume that preceding underscore would mean that it's private.

I also opened another issue, since I didn't feel like the issue was fully addressed here, if you want to keep tabs on it: https://github.com/angular/material2/issues/8423

[lcecil]

Also, @smitelij , if you're using something like (onSelectionChange)="selectOption()" on your <mat-option> component, you don't need that selectFirstOption() method. I believe the fact that the first item is active handles that for you.

[smitelij]

@lcecil Good point! I had gotten that first part onSelect working before getting the highlighting working and didn't think about that. I've updated the original comment.

[NexPlex]

Hi @lcecil

Where did you put this code? this.matAutocomplete.options.first.setActiveStyles();
I can't get the highlighting to work.

[lcecil]

Hi @NexPlex ,

What version of @angular/material are you using? Some of the more recent versions (I think 5+) have this functionality implemented already.

Just add the autoActiveFirstOption attribute to your <mat-autocomplete> selector.

Check out the documentation here:
https://material.angular.io/components/autocomplete/api#directives

[NexPlex]

Hi @Icecil,

Thank you for the quick reply. I am currently committed to [email protected] and Angular 4.4.7. I say your fix was related to [email protected]. We can't upgrade at this time. Did you get the first item to highlight with beta.12? I have highlighting working with the up and down arrows. just can't get the top item to highlight.

+-- @angular/[email protected]

@angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]

[lcecil]

Hmm, I can't quite remember, but I do think that you can do it by accessing the _keyManager.

So that would look like: this.matAutocomplete._keyManager.setFirstItemActive();

See smitelij's comment from 12/13. Good luck!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}