Search doesn't appear if select is at top of the page

[rbleuse]

Hi,
There is an UI issue when the select panel is at the top of the screen (in your stackblitz example, remove the header).
The problem is that the search feature doesn't appear because the select panel is not positioned depending on the search height.

See this stackblitz :
https://stackblitz.com/edit/github-5phju9?file=src/app/app.component.html

[macjohnny]

Hi @spanja
Thanks for your issue.
The problem you describe is kind of a known issue, or at least I didn't find an easy way to solve this.

Currently, in https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/mat-select-search/mat-select-search.component.scss#L51 we shift the options overlay by -50px, i.e. the height of the search input field, since MatSelect will place the overlay according to the options it contains, but not any other content, it does not take into account the search input field. The shift is to have the panel open with the currently selected option at the position of the select / current mouse position.
See also https://github.com/angular/material2/blob/master/src/lib/select/select.ts#L1011

As a workaround, you can manually override e.g. with

.cdk-overlay-pane-select-search {
  margin-top: 0px;
}

but this results in a an offset of the currently selected option from the cursor position of 50px.

[macjohnny]

this issue can also occur when placing the select box somewhere on the page and scrolling it to the top edge of the viewport.

[maxencefrenette]

For anybody alse who's having that problem, I recommend the disableOptionCentering option on the <mat-select> https://material.angular.io/components/select/api .

[macjohnny]

@maxencefrenette thanks for sharing a solution!
would you want to file a PR to add a note to the Readme (e.g. as a subheading in the How to use it? section? I think then we could close this issue.

[macjohnny]

@maxencefrenette I added your workaround to the https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/README.md#known-problems--solutions
I guess so far there is no better solution due to the way panel positioning is handled in material.

[macjohnny]

With the release 1.5.0 it is possible to place <ngx-mat-select-search> inside a <mat-option> element.
This prevents the search field being placed outside of the visible viewport.
Thanks to @hanuhimanshu for proposing this solution.

[ziaKhan1995]

I faced the same issue. The reason is that NgxMatSelectSearchModule was imported but not included in imports array.

[macjohnny]

@ziaKhan1995 can you open aseparate issue?