Topic: mdb-select-2 issues

SynergentDev priority asked 2 years ago

1) mdb-select-2 does not open the select dropdown automatically when tabbed to. The old mdb-select does do this. I tried to fix this issue by manually calling the .open() method when the element is focused but encountered the next two issues.

2) mdb-select-2 does not support binding to the focus event. (focus) does not trigger anything. What should I be binding to?

3) The .open() method does not work and throws a javascript error. It does work with mdb-select.

The image upload feature isn't working for me so I've copied a code sample below. My example includes the filter element but the issues occur without it too.

<form [formGroup]="testform">
  <div class="md-form">
    <!-- Does not open when tabbed to -->
    <mdb-select-2 #newSelect label="Example label" formControlName="newDropDown">
        [ngModel]="searchText | async"
        [ngModelOptions]="{standalone: true}"
      <mdb-select-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option.label }}</mdb-select-option>
  <!-- This does not work -->
  <button type="button" (click)="">test</button>

  <div class="md-form">
    <!-- Opens when tabbed to -->
    <mdb-select #oldSelect label="test" formControlName="oldDropDown" [options]="options"></mdb-select>
  <!-- This works -->
  <button type="button" (click)="">test</button> 

Arkadiusz Idzikowski staff answered 2 years ago

@SynergentDev The component should not open automatically on focus, this is expected behavior. However, we will take a closer look at the problem with focus event and open method.

Please try to use the component method inside a ngAfterViewInit hook (if you want to open the component on init). If you get ExpressionChangedAfterItHasBeenCheckedError please try to use this syntax:

Promise.resolve().then(() => {;


In v12.2.0 we added new outputs: inputFocus and inputBlur that will be fired on select input focus/blur. It should help you resolve the second problem.

Arkadiusz Idzikowski staff commented 2 years ago

@SynergentDev In v12.2.0 we added new events, please see my edited answer.

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: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No