mdb-select is not a tab stop anymore (ver 7.4.0)

Dear mdb2,

Could you please explain your problem more broadly?

What do you mean saying, that mdb-select is not a tab stop anymore?

Please describe your problem, because I'm not able to help you right now.

Best Regards,

Damian

In a form with several components, using the tab key moves the focus from one component to the next according to the tab index or their HTML order However, mdb-select is skipped and the focus goes to the next element instead of opening it as it did before, thus breaking the expected behavior

Dear mdb2,

Could you please provide me the code which is not working in your app?

I have created a form with a autocompleter, select and input. Every element is able to be focused in right order - the order in which component was created in the .html markup.

Please take a look at my example, if I'm reproducing it like you:

.html:

<div class="container">
  <div class="row">
    <div class="col-md-12 mx-auto my-5">
      <form>
        <div class="md-form">
          <input type="text" name="searchText" class="completer-input form-control mdb-autocomplete"
                 [(ngModel)]="searchText"
                 (input)="getFilteredData()" (ngModelChange)="onChange()"
                 [mdbAutoCompleter]="auto"
                 placeholder="Choose your color">
          <mdb-auto-completer #auto="mdbAutoCompleter" textNoResults="I have found no results :(">
            <mdb-option *ngFor="let option of results | async" [value]="option">
              {{option}}
            </mdb-option>
          </mdb-auto-completer>
        </div>

        <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>

        <div class="md-form">
          <input mdbInput type="text" id="form1" class="form-control">
          <label for="form1" class="">Example label</label>
        </div>
      </form>
    </div>
  </div>

.ts:

@ViewChild(MdbAutoCompleterComponent) completer: MdbAutoCompleterComponent;
  searchText = '';
  results: any;
  data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];
  optionsSelect: Array<any>;
  constructor() {
    this.results = this.searchEntries(this.searchText);
  }

  getDataItems() {
    return this.data;
  }

  searchEntries(term: string) {
    return of(this.getDataItems().filter((data: any) => data.toString().toLowerCase().includes(term.toString().toLowerCase())));
  }

  getFilteredData() {
    this.results = this.searchEntries(this.searchText);
  }

  onChange() {
    this.getFilteredData();
  }

  ngAfterViewInit() {
    this.completer.selectedItemChanged().subscribe((data: any) => {
      this.searchText = data.text;
      this.getFilteredData();
    });
  }
  ngOnInit() {
    this.optionsSelect = [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
      { value: '3', label: 'Option 3' },
    ];
  }

Best Regards,

Damian

OK Found it on my side