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

itay pro asked 5 years ago

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

itay pro answered 5 years ago

OK Found it on my side

Damian Gemza staff answered 5 years ago

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:


<div class="container">
  <div class="row">
    <div class="col-md-12 mx-auto my-5">
        <div class="md-form">
          <input type="text" name="searchText" class="completer-input form-control mdb-autocomplete"
                 (input)="getFilteredData()" (ngModelChange)="onChange()"
                 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">

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


@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() {

  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() {

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

Best Regards,


itay pro answered 5 years ago

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

Damian Gemza staff answered 5 years ago

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,


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No