mdb-select not tabbing as expected

Topic: mdb-select not tabbing as expected

Declan Ward pro premium priority asked 6 months ago

Expected behavior Should work as expected

Actual behavior Doesn't work as expected

Resources (screenshots, code snippets etc.)

                <div class="form-row">
              <div class="col-sm-6 col-md-6 col-lg-6">
                <div class="md-form form-group" >
                    <mdb-form-control>
                      <mdb-select 
                        formControlName="locationSelect" 
                        [visibleOptions]="8"
                        [tabIndex]="5"
                        >
                        <mdb-option  
                          *ngFor="let county of locationOptions()" 
                          [value]="county.value">{{
                          county.label
                        }}</mdb-option>
                      </mdb-select>
                      <label mdbLabel class="form-label">County</label>
                    </mdb-form-control>
                </div>       
              </div> ...

enter image description here

The surrounding blue line doesn't look as it should.

Am I doing something wrong?

If I remove [tabIndex]="5" the behaviour is as expected

enter image description here

In addition, pressing space bar does not open the list.

Arkadiusz Idzikowski staff commented 6 months ago

Are you trying to add tabIndex HTML attribute to the <mdb-select> HTML element or do you need to use tabindex input that is part of mdb-select API?

When you use tabIndex (with capital I) the tabindex is added directly to the <mdb-select> element. This is probably the cause of the problem, because <mdb-select> is only container for all other elements we use to display select input.

Declan Ward pro premium priority commented 6 months ago

Hi,

Can you show me a working example because I cannot get it to work so I must be missing something!

Arkadiusz Idzikowski staff commented 6 months ago

I'm not sure what the purpose of this attribute is in your project. Could you please provide more information about expected behavior?

Declan Ward pro premium priority commented 6 months ago

See https://app.screencast.com/mxEZHx2FqnSeS

The purpose of the attribute is to alter the flow of tabbing.

The problem is the label on the select list looks wrong, when it has focus by tabbing to it. Without the tabIndex attribute the label shows as expected..

Arkadiusz Idzikowski staff commented 6 months ago

I added this to our to-do list because it looks like something we will need to fix on our end. Currently tabindex input is not handled correctly and there is no other way to add the tabIndex attribute to the underlying input element.

Declan Ward pro premium priority commented 5 months ago

See below for versions in use on a test application.

enter image description here