Topic: mdb-select-2 Close list on button click

declan.ward premium asked 2 years ago


Expected behavior Ability to close the select list on clicking a button.

How do I close the select list on clicking the Close button? I can see no method for this. Clicking the form outside the list will close it but that is not an acceptable UI in my case. I would expect something like :

this.roleSelect.close();

this.roleSelect.value; will give me the value

I cannot find this in the Angular documentation.

Actual behavior

Resources (screenshots, code snippets etc.) .ts file:

closeSelect(){
    console.log('Selected closed');
}




          <mdb-select-2 
          [formControl]="roleSelect" 
          name="roleSelect"
          id="roleSelect"
          [multiple]="true" 
          placeholder="Choose your option" 
          label="Roles"
          [visibleOptions]="4"
          (changed)="rolesValueChanged($event)"
      >
        <mdb-select-option *ngFor="let option of options"
          [value]="option.value">{{ option.label }}
        </mdb-select-option>
        <!-- <button mdbBtn color="primary" size="sm" block="true">Button</button> -->
        <button class="btn-save btn btn-primary btn-sm" (click)="closeSelect()">Close</button>
      </mdb-select-2>

Arkadiusz Idzikowski staff answered 2 years ago


Clicking the select overlay closes the dropdown, this is expected behavior. You can also close the component programmatically using close method in your ts file.

If you use reactive forms, you can subscribe to valueChanges of the form control to receive information about selected values:

this.roleSelect.valueChanges.subscribe((value) => console.log(value));



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Desktop
  • Browser: Firefox Dev
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No