Tab index not working for select

Topic: Tab index not working for select

stanislav9607 free asked 5 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?

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 5 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 5 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

stanislav9607

0Support score
6Questions 0Answers 0Snippets