Topic: Tabindex in mdb-select
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
- input 1
- input 2
- input 3
- input 4
Actual behavior
Focus on mdb-select then inputs
- mdb-select 1
- mdb-select 2
- mdb-select 3
- mdb-select 4
- input 1
- input 3
- input 2
- input 4
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- 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
Tags
Related topics
r.seifert commented a 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.