Tab index not working for select


Topic: Tab index not working for select

stanislav9607 asked 7 years ago

I have select in form, and when i'm click on tab key, it is not focused in select, but it focused on simple inputs Select html code:
<div class="row">
<div class="col">
<div class="md-form">
<mdb-select [options]="userOptions"
placeholder="Выберите пользователя"
formControlName="userId"
#userId>
</mdb-select>
<div class="invalid-feedback" *ngIf="submitted && depositForm.controls['userId'].hasError('required')">
Укажите пользователя.
</div>
</div>
</div>
</div>
How to fix it?

Damian Gemza staff answered 6 years ago

Dear stanislav9607, Thanks for reaching out our support forum! I've tried to reproduce your case, but for me everything is working like a charm. I've got a form tag. Inside it, there's two div with md-form class. Inside div, there's a mdb-select and standard input. I'm able to focus by using tab key on mdb-select. After next tab, the focus moves to input, so there's everything okay. I've checked it on Firefox 58, @ Ubuntu 17.10. Here's my code:
<div class="row">

<div class="col-md-6 mx-auto my-5">

<form>

<div class="md-form">

<mdb-select [options]="optionsSelect"placeholder="Choose your option">

</mdb-select>

</div>

<div class="md-form">

<input type="text"class="form-control"id="form1"mdbInputDirective>

<label for="form1">My label</label>

</div>

</form>

</div>

</div>
Could you please check my code, if it works to you? Or provide me a reproduction steps to reproduce your case. Best Regards, Damian

stanislav9607 commented 6 years ago

I used your code, but its not work (I replaced all my code with your). I'm run my app on chrome on Windows 10, but I think it does not matter. I'm researching your lib now, and i have some ideas. In 'mdb-select' component template you must replace *ngIf with [hidden]. Try to do it. Screen: http://prntscr.com/jxjle1

Damian Gemza staff commented 6 years ago

Did you try to use that solution in your app? Does it work to you?

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No