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> ...

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

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