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