Components: Ability to configure autocomplete to not open overlay on focus

Created on 24 Feb 2018  路  6Comments  路  Source: angular/components

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Ability to be able to not open the autocomplete until user starts typing in so many characters.
I believe this not really possibly easily today so provided an option.
Please correct me if I am wrong on this.

What is the current behavior?

When the autocomplete gets focus it will open the overlay automatically.

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

The biggest use case for this is we want the ability to type in the field a few characters before it makes an API call. Right now it will automatically make the API call on focus. If know a way to do this in its current state would love to hear but I believe since it auto opens after focus it is not really possible.

Basically need the ability to turn the open upon focus off.

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

Latest Angular/Material

Is there anything else we should know?

Most helpful comment

The only thing the autocomplete does on focus is to check whether there are any options in the view and it opens the panel if there are. If you don't want it to open on focus, you can decide not to return anything until the user has typed in X amount of characters. Here's a fork of one of the doc examples that won't open the panel until you've typed in at least 3 characters.

All 6 comments

I'd appreciate this feature too. To work around the lack of a "force selection" feature, you certainly want to keep the last selected option after you just focus the input, without typing anything.

The way I currently setup everything to get this feature, if you focus the input, as soon as you leave it it's cleared out: it happens because when you focus the input, it understands that you want the autocomplete to run (and it silently "opens" an empty panel as my options come from a server after you start typing). As you did not choose anything and just tabbed away, it clears out the input (the force selection feature). It could be solved if there was a way to cancel the auto open on focus.

What I'm currently using to force selection: https://stackblitz.com/edit/autocomplete-force-selection-tests

To see what I'm talking about just:

  1. select an item, and click outside.
  2. focus the input again (you'll see the opened panel because of this stackblitz setup. In my real cases, you don't really see an opened panel, but it's considered opened internally to autocomplete)
  3. without clearing the input, tab away.

It can be worked around, but the code looked so ugly that I decided to use this approach just where it's acceptable to have the input cleared after sequential focus/blur events.

@julianobrasil yeah to me that alot of extra/unnecessary work in order to do something very simple that that material2 could just provide a simple flag for. I am going to investigate creating a PR to them for this shortly. Been having trouble building though so will see how far I can get.

The only thing the autocomplete does on focus is to check whether there are any options in the view and it opens the panel if there are. If you don't want it to open on focus, you can decide not to return anything until the user has typed in X amount of characters. Here's a fork of one of the doc examples that won't open the panel until you've typed in at least 3 characters.

I had missed the new closed/opened events (6.0.0-beta version) and also had misunderstood panelClosingActions:

A stream of actions that _should_ close the autocomplete panel

The panel doesn't need to necessarily be opened for the action that _should_ close it to take place in the input/autocomplete.

Thanks, @crisbeto.

Thanks @crisbeto! Will close this issue.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

crutchcorn picture crutchcorn  路  3Comments

RoxKilly picture RoxKilly  路  3Comments

LoganDupont picture LoganDupont  路  3Comments

Hiblton picture Hiblton  路  3Comments

alanpurple picture alanpurple  路  3Comments