Enhancement: Replacing overlayDir: CdkConnectedOverlay from MatSelectSearchComponent

[evoltafreak]

Describe the enhancement:
Since the overlayDir: CdkConnectedOverlay property in the MatSelect class will be deprecated soon in Angular 10, you should consider to replace it in the MatSelectSearchComponent with following code.

Describe the solution

this.matSelect.openedChange
      .pipe(takeUntil(this._onDestroy))
      .subscribe((opened: boolean) => {
        if (opened) {
          // note: this is hacky, but currently there is no better way to do this
          let element: HTMLElement = this.searchSelectInput.nativeElement;
          let overlayElement: HTMLElement;
          while (element = element.parentElement) {
            if (element.classList.contains('cdk-overlay-pane')) {
              overlayElement = element;
              break;
            }
          }
          if (overlayElement) {
            overlayElement.classList.add(overlayClass);
          }
        }
      });

Also consider to run the following test should show a search field and focus it when opening the select synchronous in the MatSelectSearchTestComponent to make all tests successful again.

Gruess
Evoltafreak

[macjohnny]

@evoltafreak thanks for suggesting this code change. would you like to file a PR for this?

[evoltafreak]

@macjohnny I just opened a PR #209.

[macjohnny]

@evoltafreak thanks a lot!