Topic: Tabindex in mdb-select

jenov9 priority asked 11 months ago


I'm trying to customize the navigation order using the TAB key. When I add a tabindex to the mdb-select tag, it is applied to the mdb-select element itself instead of the generated input. As a result, the focus is initially set on the mdb-select elements in the correct order, but then it moves to the inputs in the wrong order.

Here is a sample code :

<div class="row">
<div class="col">
  <mdb-select
    class="select-sm"
    name="select1"
    [tabIndex]="1"
    placeholder="select1"
  ></mdb-select>
</div>
<div class="col">
  <mdb-select
    class="select-sm"
    name="select3"
    [tabIndex]="3"
    placeholder="select3"
  ></mdb-select>
</div>

Expected behavior

Get focus on inputs

  1. input 1
  2. input 2
  3. input 3
  4. input 4

Expected

Actual behavior

Focus on mdb-select then inputs

  1. mdb-select 1
  2. mdb-select 2
  3. mdb-select 3
  4. mdb-select 4
  5. input 1
  6. input 3
  7. input 2
  8. input 4

Actual


Rafał Seifert staff commented 11 months ago

Can you please upload full code with the rest of inputs? So we can properly test the behaviour of navigation.Additionally it seems like you are misspelling [tabIndex] input. It should be [tabindex] with small letter I. Also please consider using mdb-form-control to wrap select element in order to achieve proper styling.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes