angular 2 material input default focus remove

Question

I have one dialog with one text input , some radio buttons and ok cancel. When the dialog open the cursor is blinking inside the text input which means the placeholder text has zoomed out and hard to read. placeholder text is something like 'Describe details of the issue in this box'. How can I remove default autofocus in angular 2 ? As a hack even if I can somehow make the placeholder not zoom out I am good. Please advise. Using angular material controls.

Answer 1

In the config object you pass after the component in dialog.open() you can set the autofocus property to false.

this.dialog.open(SomeComponent, {
  width: '100px',
  data: {},
  autoFocus: false
})

Answer 2

Another solution is setting the dialog's inputs' tabindex to -1.

<button tabindex="-1" #closeAuthPanelButton mat-icon-button>
  <mat-icon (click)="emitAuthPanelClose()">close</mat-icon>
</button>