CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
Gullu
Gullu

Reputation: 3529

angular 2 material input default focus remove

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.

Upvotes: 4

Views: 6163

Answers (2)

fame
fame

Reputation: 145

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>

Upvotes: 6

Mitch McCutchen
Mitch McCutchen

Reputation: 386

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
})

Upvotes: 10

Related Questions