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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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