New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example about mat-optgroup inside mat-autocomplete #10196

Closed
WizardPC opened this Issue Feb 28, 2018 · 11 comments

Comments

Projects
None yet
6 participants
@WizardPC

WizardPC commented Feb 28, 2018

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

This comment has been minimized.

WizardPC commented Mar 2, 2018

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

This comment has been minimized.

WizardPC commented Mar 2, 2018

Comment updated with a stackblitz demo.

@WizardPC

This comment has been minimized.

WizardPC commented Mar 20, 2018

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

@raygervais

This comment has been minimized.

Contributor

raygervais commented Mar 26, 2018

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

@mmalerba

This comment has been minimized.

Contributor

mmalerba commented Mar 27, 2018

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

@raygervais

This comment has been minimized.

Contributor

raygervais commented Apr 1, 2018

@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

This comment has been minimized.

Member

crisbeto commented Apr 1, 2018

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

This comment has been minimized.

Contributor

raygervais commented Apr 2, 2018

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

This comment has been minimized.

WizardPC commented Apr 2, 2018

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

@WizardPC

This comment has been minimized.

WizardPC commented Apr 18, 2018

Thanks @raygervais 😉

@meyer20

This comment has been minimized.

meyer20 commented May 25, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment