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:

.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


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,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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
Tags