Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Dynamic mdb-selects on screen

starrcompanies free asked 6 years ago


I am having strange issue when I use <mdb-select within an ngIf with dynamic options, such as - 

<mdb-select [options]="getSelectOptions(field.values, field.type)" [formControlName]="getFormFieldNameForVehicle(vehicleType.key, field.name)" label=" " placeholder=" "></mdb-select>

The dropdowns show on the screen, but when I click a second one, the first one stays open and doesn't close. Neither select a value.

Arkadiusz Idzikowski staff answered 6 years ago


Thank you for the confirmation. I tried to recreate the problem with the code you provided but without success. Could you send a demo to a.idzikowski@mdbootstrap.com? Maybe it would help me to spot the problem. 

Also please check if the problem exist when you use code from our select documentation.

Regards,

Arek


starrcompanies free answered 6 years ago


Thank you.  We are a using the <mdb-select somewhat dynamically in a ngFor - 

<div class="vehicle-type-field-editor d-flex flex-column pr-2 pl-2" *ngFor="let field of category.fields">
<p class="flex-fill">{{field.description}}</p>
<div class="form-group">
<mdb-select [options]="getSelectOptions(field.values, field.type)" [formControlName]="getFormFieldName(vehicleType.key, field.name)" label=" " placeholder=" "></mdb-select>
</div>
</div>

getSelectOptions in the component returns the appropriate array of an object with {label, value} properties
getSelectOptions(values): SelectOption[] {
return values.map(v => {label:v, value:v});
}

export class SelectOption {label: number | string;value: any;
constructor(label: number | string, value: any) {
        this.label = label;this.value = value;
}
}
When the page loads, it generates the controls and the options fine.  But after selecting one dropdown, I cannot select an option.  Then I click on another dropdown, and it opens, but the other one doesn't close.  Neither is selectable.


Arkadiusz Idzikowski staff answered 6 years ago


Hello,

Mdb-select is a premium component, and according to our system, you use MDB Free version. Please, provide us a number of your order or registered email so we can fix it. You can send it to me on: a.idzikowski@mdbootstrap.com.

Could you provide the full code you are using and reproduction steps? It would help me to debug this problem.

Regards,

Arek

 



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No