Topic: mdb-select drop down list length

itay pro asked 6 years ago


How can the user select values using only the arrows, up down and tab ?

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, Damian

itay 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, Damian

itay 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 ?

itay pro answered 6 years ago


Fixed in 6.2.1 Thank you

itay pro answered 6 years ago


In the HTML template I have:
<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();
but get an error: select.openDropdown is not a function
I sent you a demo app

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

Damian Gemza staff answered 6 years ago


Dear mdb2, Please try to use this code: .html:
<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>
.ts:
@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();

}
(focusin) event open Select dropdown fine. As for now, it's necessary to put on Select element customClass property, because without it, console may throw you an error. We'll fix this with next release. Best Regards, Damian

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, Damian

itay 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, Damian

itay 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, 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

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags