Topic: mdb-select drop down list length
<mdb-select formControlName="iBusinessType" [options]="businessTypes" (focusin)="openSelect($event)" customClass=""></mdb-select>and in ts file I have:
const select = event.currentTarget as SelectComponent;
select.openDropdown();
Arkadiusz Idzikowski staff commented 6 years ago
Dear mdb2, In that case event points to some div wrapper and not to the select directly. Problem with select focus will be fixed in new version, for now please use solution with @ViewChild. Best, Arek
<div class="row"> <div class="col-md-6 mx-auto my-5"> <mdb-select #select [options]="optionsSelect"placeholder="Choose your option"customClass="" (focusin)="openSelect()"></mdb-select> <label>Example label</label> </div> </div>
@ViewChild('select') select: SelectComponent;
optionsSelect:Array<any>;
ngOnInit() {
this.optionsSelect= [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' },
];
}
openSelect() {
this.select.openDropdown();
}
itay pro commented 6 years ago
Thanks Damian, This solution does work ! However, what should I do if I have many such components in a form when only one can have 'select' as an id ? Will you add this to the next release ?Damian Gemza staff commented 6 years ago
Dear mdb2, I cannot promise you, that your desired feature will be added with the next release of MDB Angular, but we'll do our best to add it in future. Best Regards, Damianitay pro commented 6 years ago
what should I do if I have many such components in a form when only one can have ‘select’ as an id ?Damian Gemza staff commented 6 years ago
Dear mdb2, The only workaround, for now, is to do as many @ViewChild as many selects you have and do this.select.openDropdown() method on each one. We'll do our best to provide a functionality to open dropdown with focus in future release. Best Regards, Damianitay pro commented 6 years ago
Hi Damian, Regarding "The only workaround, for now, is to do as many @ViewChild as many selects you have and do this.select.openDropdown() method on each one." If I use (focusin)="openSelect($event)" on all select elements, will I be able to extract the element from the event and then call el.openDropdown(); on it ?Arkadiusz Idzikowski staff commented 6 years ago
Dear mdb2, The event target should point to the specific select, so yes, you should be able to do that. If you will have any problems please let me know. Best, ArekFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 6 years ago
Dear mdb2, The user is able to select values from Material Select by focusing the input of Select, and then he has to open it (simply by pressing space key, or something else). After opening a Select dropdown, the user is able to navigate through select's options simply by using arrow up / arrow down keys. Best Regards, Damianitay pro commented 6 years ago
I understand. As I am looking for a mouse-less entering of data, opening the drop-down using the mouse is not a good solution. in jQuery, the drop down entered automatically when clicking tab and that was good. How can I reproduce it here in Angular ?Damian Gemza staff commented 6 years ago
Dear mdb2, You can't overwrite the method with which dropdown in mdb-select is opening. You can simply open it by focusing mdb-select element (simply by tab key), and then use space / enter key to open that drop-down. Do you need another key with which mdb-select dropdown would be opened? If yes, please describe me it, and we'll try to implement your feature request in future releases. Best Regards, Damianitay pro commented 6 years ago
As there is no indication when an mdb-select is focused, I cannot expect my users to click the space key. It should open automatically, like before (in jQuery) How can I implement it ?