[BUG] When using down or up arrow, the mat-select scrollTop isn't calculated correctly

[Mabiro]

Thanks for this component!

I realize this might not be possible to fix without a dirty hack like I provided in the "Additionnal Context" section, but I thought maybe you'd be able to give a better approach.

Describe the bug
It looks like the height of the ngx-filter and the fact that it is above the other mat-options makes it so the mat-select can't calculate correctly where the scrolltop of its panel should be.

When using the component inside a mat-option, the issue is when going "up" with the up arrow.
When using the component outside of a mat-option, the issue is when going "down" with the down arrow.

To Reproduce

1. Go to the demo https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.html
2. Open the single selection example
3. Go to the bottom of the list using the down arrow
4. Go back to the top of the list with the up arrow
5. You should see that once the scroll bar starts going up, the active item is not visible, and that the first option is not visible. (It requires a manual scroll up)

The same can be observed with the component outside of a mat-option, but it's the other way around.

Expected behavior
When navigating up or down, the active item should correctly be displayed in the mat-select panel.

Screenshots

Desktop (please complete the following information):

• OS: Win10
• Browser Chrome
• Version Latest

Additional context
I was able to "fix" the issue by overriding private methods of MatSelect, but I would rather stay away from this:

this.matSelectElement['_scrollActiveOptionIntoView'] = (): void => {
            let activeOptionIndex = this.matSelectElement['_keyManager'].activeItemIndex || 0;
            let labelCount = _countGroupLabelsBeforeOption(activeOptionIndex, this.matSelectElement.options, this.matSelectElement.optionGroups);

            this.matSelectElement.panel.nativeElement.scrollTop = _getOptionScrollPosition(activeOptionIndex + labelCount,
                this.matSelectElement['_getItemHeight'](),
                this.matSelectElement.panel.nativeElement.scrollTop,
                SELECT_PANEL_MAX_HEIGHT - 51
            );
        };

It's the same implementation, but the height of the filter is substracted from "max height". I tested it with my ngx-search outside of the mat-option, but not inside. So it might not work for both.. maybe its +51 in that case? not sure..

[macjohnny]

@Mabiro thanks for reporting this issue. it seems this is not so easy to fix, and as you stated, overwriting the _scrollActiveOptionIntoView method is not a sustainable option.
However, I will see if we can find a better way to achieve this.

[macjohnny]

one way to achieve this could be something similar to
https://github.com/angular/material2/blob/876727dbfa5b4a4bf43edded91c6ee84eb2db7e1/src/lib/select/select.ts#L905-L907

where we listen for keymanager changes and if the option is covered by the search input, shift the scrolltop

[macjohnny]

@Mabiro would you like to try to implement the fix I suggest?

[Mabiro]

Sure, I'll take a look at this. I am not sure how to determine whether the option is covered by the search input in clean manner, but I'll give it a shot.

Thanks!

[macjohnny]

"covered" would be if scrollTop == 51 * option index or something like that

[Mabiro]

@macjohnny : Gave it a try, let me know what you think! #120

[macjohnny]

this is release in 1.7.0. thanks @Mabiro for the fix!