md-autocomplete: A few issues

[epelc]

Here are a few issues I've found with the new md-autocomplete directive. I didn't make separate issues as these are somewhat minor and I didn't want to spam the issues section. Also let me know if these shouldn't be reported yet(if its still in heavy development). I assume they should since md-autocomplete seems to have been initially released according to the changelog.

• If you type something in and several results come up clicking outside of the input/dropdown doesn't close the dropdown. However if you just hit enter(without any item selected) it will close the dropdown.
• The x button doesn't have any styles for the focused state. It also appears to just be a regular button so perhaps switching it to md-button would be a good idea for the aria benefits.
• The first transition when you hit the down arrow seems a bit delayed to the point where it's very noticeable.
• The bar seems to always have md-raised type styles. Could this become a class instead so that the default could fit better on a toolbar.
• This is just a question but there doesn't seem to be any message when no items have been found. For instance type in a bunch of numbers into the demo and the user is left clueless not knowing if what they have entered is valid.

Also very good job on the first version I didn't even expect to get this so soon.

[ThomasBurleson]

@robertmesserle - Also the lookup delays [from keydown to search query results] seem excessive (at least in the demos).

[epelc]

@robertmesserle @ThomasBurleson Specifically the first one is really long to the point where it's easy to hit enter long before you see the focused state.

[robertmesserle]

@ThomasBurleson Yea, the delays are a bit exaggerated. For this example, it may make sense to just remove the delays entirely, since they only serve to demonstrate support for asynchronous lookups. It's unlikely that you'd realistically need to asynchronously lookup states...

[robertmesserle]

@epelc Great feedback! There should definitely be a fix in to address these issues soon.

[marcysutton]

There is definitely more work for accessibility, as noted in #1473. I have started on those, too!

[epelc]

@robertmesserle I think your thinking about the time to load results. The delay @ThomasBurleson and myself are mentioning is after your results have loaded. When you hit the down arrow the transition to each item(especially the first) is a bit long. Also you can hit enter halfway through this and it will select it(not that this itself is a bug it's expected but it shows how long the delay in visual effects is).

[kschwidder]

Does the autocomplete component supports handling a list of objects of arbitrary structure ?
In my szenario I am returning a list of skills [{id, name, description}...) and need to set md-item-text to name.The loadSkillTags is a function which returns $http promise. I tried so far to use the component but I failed to get it running.

{{item.name}}

[marcysutton]

@robertmesserle just capturing the things we discussed this morning:

• When a user is focused on the cancel button and presses space/enter, focus is lost when the button gets hidden. Focus should be sent to the input.
• In IE11, the input has an extra "X" when the input field is focused. It's definitely part of the input, because if you put display: none; on the button it's still there (see screenshot)
  

[epelc]

@marcysutton What do you think about switching the cancel button to an md-button?

[marcysutton]

@epelc I think that is a great idea if we can reuse the behavior and style beyond mdAutocomplete. Support for a smaller icon button like you'd see in a toolbar is definitely something we're missing. The recommended focus style for these is an ink circle that grows out from the button. See this screenshot:

I wonder if we could leverage that here.

[epelc]

@marcysutton Perhaps the some styles from .md-fab-mini could be helpful.

[robertmesserle]

Adding a checklist for progress tracking...

• If you type something in and several results come up clicking outside of the input/dropdown doesn't close the dropdown. However if you just hit enter(without any item selected) it will close the dropdown.
• The x button doesn't have any styles for the focused state. It also appears to just be a regular button so perhaps switching it to md-button would be a good idea for the aria benefits.
• The first transition when you hit the down arrow seems a bit delayed to the point where it's very noticeable.
• The bar seems to always have md-raised type styles. Could this become a class instead so that the default could fit better on a toolbar.
• This is just a question but there doesn't seem to be any message when no items have been found. For instance type in a bunch of numbers into the demo and the user is left clueless not knowing if what they have entered is valid.
• When a user is focused on the cancel button and presses space/enter, focus is lost when the button gets hidden. Focus should be sent to the input.
• In IE11, the input has an extra "X" when the input field is focused. It's definitely part of the input, because if you put display: none; on the button it's still there (see screenshot)

[robertmesserle]

Added checkbox to toggle simulated query delay in the demo along with a brief description of what is going on: 6c5fdba

[robertmesserle]

Closing this issue - have opened new issues for the items that have not been addressed yet.

[rscottfree]

I don't see that the md-raised style on the md-autocomplete was every addressed. By default I still get that raised styled on my autocomplete components. I don't see that an issue was created to fix this. Is there a way to have a full-width, flat md-autocomplete?

[epelc]

@rscottfree See the floating label demo(last one on the bottom) https://material.angularjs.org/HEAD/#/demo/material.components.autocomplete

[rscottfree]

Thanks, @epelc, but that's not quite what I'm after. Perhaps what I'm after doesn't exist but looking at the Material design document, it appears that there is an auto-complete component within a toolbar and the auto-complete input box has no styling around it, no drop-shadow or border even. Another example is the Google Inbox app where the search box has a background color and border style, but is otherwise a flat design, no raised effect.

It's basically the md-autocomplete with floating label, but without the floating label and no bottom border 😃

https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field

[robertmesserle]

@rscottfree We should definitely add support for this visual treatment. I believe a ticket was opened, but since I don't have it handy, I will open a new one now just to make sure it doesn't fall through the cracks

[abeniwal]

@robertmesserle was there ever any progress on allowing a flat md-autocomplete (without a floating label)? I couldn't find the ticket.

[robertmesserle]

Not yet, but it is planned.

Sent from my iPhone

On Oct 10, 2015, at 3:48 PM, Anil Beniwal notifications@github.com wrote:

@robertmesserle was there ever any progress on allowing a flat md-autocomplete (without a floating label)? I couldn't find the ticket.

—
Reply to this email directly or view it on GitHub.

[rick4470]

+1 for md-autocomplete icons

[b22n]

+1 for icons

[drinkbird]

+1 for icons 👍

[epelc]

@rick4470 @b22n @drinkbird What icons are you all referring to? The faces?

It might be a good idea to make a new issue for these icons specifically. This issue was just meant to address a big group I found at the time which I thought could be fixed pretty rapidly.

[drinkbird]

@epelc I was referring to the ability to define an icon to be displayed within the autocomplete control, like the magnifying glass in @rscottfree 's post above. I would be happy to open a new issue if you think it's more appropriate.

[rick4470]

I ended up using css to add in the icon, what I would like to see is the icon be part of the input field.

[epelc]

@drinkbird I think it'd be good if you'd open a new issue for this.

[colbroth]

Was a new issue submitted for adding the icon as part of the input field? I am trying to use md-icon with md-autocomplete on the same row and the icon does not align properly.

[drinkbird]

@colbroth yes it's #6150

[fernandogomesdf]

+1 for icons