Topic: Tabindex in mdb-select

jenov9 priority asked 1 year 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 free commented 1 year 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