Topic: Select with filter and option groups

tano pro asked 4 years ago

I have an mdb-select with filterenabled and option groups. If I filter for a group the nested items disappear. The filter should handle group filtering or a possiblity to add custom filtering(like compareWith) would be good to handle it by myself. I know it is a little bit tricky to handle this kind of filtering, I will add the groupname to every child and the filter will look at both the label and groupname to get the good result.

Thank you!


tano pro answered 4 years ago


Since we don't know whether the user is looking for group or element, we should handle both scenarios:

the option-interface should contain a reference to the group(I use the grp for label since the user can see that even it is redundant).
During filtering I set the g variable to the grp(for item elements) if has any or to label(group elements) and search in g(group or subitems) and l(for items) and set the shown value.So this case the result will show all the element whiches contains the term and all the sublements of the group if the user looked for the group independently from the subelements contain the given term or not acceptable.

Thank you!

If you need some more info to clarify something, reach me out


Arkadiusz Idzikowski staff answered 4 years ago


Glad you found a workaround for now.

We will consider implementing something like that in our select. We currently have some important changes planned for this component, so we don't want to give promises that we might not fulfill.

Could you describe in more detail how such a function would work? For example, whether the search for the given option group label should display all options related to this group?

tano pro answered 4 years ago

So I have a hack like this:

    set medSelects(selects: QueryList<SelectComponent>) {
        selects.forEach(s => {
            const ol: OptionList = s.optionList;
            ol.filter = (term: string): boolean => {
                let anyShown = false;
                if (term.trim() === '') {
                    ol.options.forEach(option => {
                        option.shown = true;
                    anyShown = ol.options.length > 0;
                } else {
                    ol.options.forEach(option => {
                        const l: string = Diacritics.strip(option.label).toUpperCase();
                        // tslint:disable-next-line: no-string-literal
                        const group = option.wrappedOption['grp'];
                        const g: string = group ? Diacritics.strip(group).toUpperCase() : l;
                        const t: string = Diacritics.strip(term).toUpperCase();
                        option.shown = g.indexOf(t) > -1 || l.indexOf(t) > -1;

                        if (option.shown) {
                            anyShown = true;

                return anyShown;


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No