CODEWITHSUNDEEP
angularangular-material
sally
sally

Reputation: 429

How can I focus readonly input?

I have material calendar input fields. I make it readonly input field so that a user can input only from pop up date picker but I want to make it focus on this field when the user click this field. (highlight input field) focus() function does not affect because this is readonly input field. How can I add same effect as focus function on readonly input field?

<mat-form-field>
    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
  </mat-form-field>

Upvotes: 0

Views: 2162

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21638

Try adding tabindex="-1" and if that doesn't work then wrap it in a span with tabindex="-1" and call focus() on the span. You wont technically be focusing the input but the focused span will give the illusion of it being in focus.

Here is a StackBlitz demo https://stackblitz.com/edit/angular-uaprbt

Upvotes: 1

Related Questions