material select and keyboard navigation

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: material select and keyboard navigation

psaladna pro asked 8 years ago

Is it possible to get the material select to work with the keyboard? Currently the mouse has to be used to select options. The desired behavior would be the same as the browser-default style, where one could tab to the select then use the up/down arrows to navigate and/or type the name of the option, not live search in this case, just the normal behavior of a select list.

sysadmin pro answered 8 years ago

Bumping this. Currently using 4.3.0 pro. We need web accessibility enhancements so please keep that in mind for future dev efforts. Important requirements for web users in North America. 1. MD Select keyboard navigation. Also please allow passing of "data" attributes set on the select field to the generated input field "select-dropdown". There already is a data-activates. 2. Keyboard selection/tab/navigation for radios/checkboxes. You currently cannot tab to any checkboxes/radios. 3. Datepicker, navigating the days with arrow keys needs to update the current active date. Also, once a date is selected, you cannot shift+tab to a previous field. It will keep refocusing the date field instead and bring up the datepicker in a never ending loop. I'm sure I missed a few things but these 3 additions would be greatly appreciated! Thanks :)

Huichofer pro answered 7 years ago

Hi, Is there any update on this functionality? I got version 4.5.1 and seems to still happening. Thanks!

scs answered 7 years ago

Hello, This feature if implemented will be very useful. Any update on when this will be done and released ?  

Kamil Paciepnik answered 8 years ago

Hi psaladna, at the moment we don't have this functionality, but we consider adding it. Regards

ijabit answered 8 years ago

Wow, that's terrible support! This code is clearly present in mdb.js, and it works! But there is a stylesheet issue where the .selected option isn't highlighted. If you drop down and then use your arrow keys and hit enter it will switch. There is support for using the arrow keys, the escape key, enter key, and typing to find an option. Here is an extremely simple fix to get the selected option to highlight: .dropdown-content li.selected { background-color: #eee; }

Kamil Paciepnik answered 8 years ago

Hi sysadmin, Thanks for the suggestion! For sure we will take them into consideration. Regards

Charles Verbo answered 8 years ago

any update for keyboard navigation for material select ?

Kamil Paciepnik answered 8 years ago

Charles Verbo, At the moment we not introduced any new keyboard navigation. But in the future we intend to add more of this type of solutions. Regards
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
psaladna
Pro User
4Support score
1Questions 0Answers
0Snippets likes 0Snippets