when click mat-select input focus another input

[asadullazadeh]

Reproduction

Hi guys. I use ionic 4 and integrated angular material into my projects. Everything work perfectly but when I want to create the custom select component with search input I seem this issue. When open mat-select and click search input application focused another input. I don't solve this problem. I don't know maybe it's a bug. I upload *.gif file for more detail.

My Codes

<form>
  <ion-row style="padding-bottom: 300px;">
        <ion-col size="12">
          <app-select-search [label]="'Məhkəmənin adı'" [list]="selectedCourts" formControlName="courtId">
          </app-select-search>
        </ion-col>
      </ion-row>

  <ion-row>
        <ion-col>
          <mat-form-field class="w-100">
            <input formControlName="caseNo" matInput placeholder="{{'SEARCH.INPUT_CASENO' | translate}}">
          </mat-form-field>
        </ion-col>
      </ion-row>
</form>

Custom mat-select component:

<mat-form-field class="w-100" [ngClass]="extraClass">
    <mat-label>{{label | translate}}</mat-label>  
    <mat-select #select [formControl]="control" panelClass="search-dropdown" (selectionChange)="selectionChanged($event)">
        <input matInput placeholder="Axtar..." class="search-input" (keyup)="searchList($event.target.value)" (keydown)="$event.stopPropagation()" autocomplete="off" id="search-input">
        <div class="search-container">
            <mat-option *ngFor="let item of selectedList" [value]="item.id">
                {{item[property]}}
            </mat-option>  
        </div> 
    </mat-select>
</mat-form-field> 

Screen

My Packages

`"@angular/animations": "8.2.14",
    "@angular/cdk": "8.2.3",
    "@angular/common": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/material": "8.2.3",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14",
    "@ionic-native/core": "5.17.1",
    "@ionic-native/file": "5.17.1",
    "@ionic-native/file-opener": "5.17.1",
    "@ionic-native/file-transfer": "5.17.1",
    "@ionic-native/in-app-browser": "^5.18.0",
    "@ionic-native/keyboard": "^5.19.0",
    "@ionic-native/network": "^5.18.0",
    "@ionic-native/onesignal": "^5.18.0",
    "@ionic-native/splash-screen": "5.17.1",
    "@ionic-native/status-bar": "5.17.1",
    "@ionic/angular": "4.11.5",
    "@ionic/storage": "^2.2.0",`

[shayanaijaz]

Are there any updates on this? I'm running into the same issue

[roooauul]

Solution? :(

[vrkansagara]

add #search to the input element and then add (opened)="search.focus()" to the mat-select element it will work

[narenderreddy]

It seems like not working