Example about mat-optgroup inside mat-autocomplete

[WizardPC]

Bug, feature request, or proposal:

Documentation request

What is the expected behavior?

Having an working example of this code :
https://material.angular.io/components/autocomplete/overview#option-groups

What is the current behavior?

No stackblitz or demo. And it's not easy to understand... because for the "mat-optgroup" you need (implicitly ?) to go to the "Select" component section, and with a group structure (eg: pokemonGroups) the autocomplete filter (eg: filteredOptions: Observable<string[]>;) doesn't work anymore.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-nwdj9u

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

Having a autocomplete input with group.

Like this for example

Input : "d" <---------- autocomplete
[D <------------------- group
Dog <------------- option1
Dragon <---------- option2
...
]

[WizardPC]

Thanks @jelbourn for the tags.

Indeed the "help wanted" is welcome, because i can't actually find myself how to adapt the Observable type to work with a group...

If someone know how to do it, I will really appreciate !!

[WizardPC]

Comment updated with a stackblitz demo.

[WizardPC]

No one ? No more luck on stackoverflow... 🤐

[raygervais]

I'd like to take a crack at this if @mmalerba thinks it's a feature worth adding 👍

[mmalerba]

@raygervais sounds good to me. @crisbeto should probably be the one to review it, I'm not too familiar with the autocomplete

[raygervais]

@WizardPC, I forked and completed your mat-optgroup example. Can be found here: https://stackblitz.com/edit/angular-smg2xm?file=app/app.component.ts, from there I'm updating the documentation to reflect (based on the original example which is there). @crisbeto is this how the autocomplete function should behave? or should it filter as well the options so that if I put Dr from the example above, Dog would be removed from the panel?

[crisbeto]

I'd say that it should only filter the options @raygervais, the groups are only used for grouping similar results together. Here's an example from our demo app that does the same: https://github.com/angular/material2/blob/master/src/demo-app/autocomplete/autocomplete-demo.ts#L131

[raygervais]

Thanks for the pointer @crisbeto, will correct in my StackBlitz update and from there work on the PR.
Edit, corrected in the above StackBlitz link to follow the same code base which you specified above @crisbeto. I'll create a PR for it today 👍

[WizardPC]

@raygervais thanks for your time ! Works as expected ;)

[WizardPC]

Thanks @raygervais 😉

[meyer20]

Hi @raygervais

Is possible to do something like this: https://i.stack.imgur.com/tvAp5.png using the autocomplete, i say, multiple colums in a line.

Thanks

[angular-automatic-lock-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.}