title: Open Mat-Select Drop down in Angular when focus comes on Mat-Select
body: <p>I want to open Mat-Select Drop down when I press Tab key if coming from previous field or Shift + Tab if coming from the next field after Drop Down. How to achieve this ?</p>
  <p><a href="https://i.stack.imgur.com/gT0TW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gT0TW.png" alt="This is my Account Page" /></a></p>
  <p>Now, as in the image - Account Type is my Mat-Select Drop Down. So if I press tab key from Account Name focus will shift to Account Type but I want to open the Drop Down. Like Wise if I Press Shift + Tab key combination from Company I want to open Drop - Down of Account Type.</p>
  <p>I went through all the <a href="https://material.angular.io/components/select/api" rel="nofollow noreferrer">Angular Material Select API's</a> but not able to achieve my goal.</p>
  <p>This is my Account Type Drop Down Code -</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg-4 col-md-4 col-sm-12 col-label-line-height&quot;&gt;
          &lt;mat-label&gt;Account Type &lt;/mat-label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-8 col-md-8 col-sm-12&quot;&gt;
          &lt;mat-form-field&gt;
              &lt;mat-select formControlName=&quot;AccountTypeCode&quot; [disabled]=&quot;this.DataService.LeaseCount&quot; [(ngModel)]=&quot;AccountModel.AccountTypeCode&quot;&gt;
                  &lt;mat-option *ngFor=&quot;let AccountType of this.AccountTypeList&quot; [value]=&quot;AccountType.Code&quot;&gt;
                  {{ AccountType.Name }}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf=&quot;hasError('AccountTypeCode', 'required')&quot;&gt;Account Type is required&lt;/mat-error&gt;
              &lt;mat-error *ngIf=&quot;hasError('CompanyCode', 'min')&quot;&gt;Account Type is required&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>So far, I have tried -</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-lg-4 col-md-4 col-sm-12 col-label-line-height&quot;&gt;
          &lt;mat-label&gt;Account Type &lt;/mat-label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-lg-8 col-md-8 col-sm-12&quot;&gt;
          &lt;mat-form-field&gt;
              &lt;mat-select (open)=&quot;matSelectOpen($event)&quot; formControlName=&quot;AccountTypeCode&quot; [disabled]=&quot;this.DataService.LeaseCount&quot; [(ngModel)]=&quot;AccountModel.AccountTypeCode&quot;&gt;
                  &lt;mat-option *ngFor=&quot;let AccountType of this.AccountTypeList&quot; [value]=&quot;AccountType.Code&quot;&gt;
                  {{ AccountType.Name }}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf=&quot;hasError('AccountTypeCode', 'required')&quot;&gt;Account Type is required&lt;/mat-error&gt;
              &lt;mat-error *ngIf=&quot;hasError('CompanyCode', 'min')&quot;&gt;Account Type is required&lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In .ts File -</p>
  <pre><code>matSelectOpen(e) {
      Console.log(e); //just to check whether function is called or not
  }
  </code></pre>
  <p>I have also tried with event as follows : -</p>
  <blockquote>
  <p>(trigger)=&quot;matSelectOpen($event)&quot;</p>
  <p>(panelOpen)=&quot;matSelectOpen($event)&quot;</p>
  </blockquote>
  <p>Any help would be appreciated.</p>