Keyboard Function

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Keyboard Function

rashesh patel asked 5 years ago

Hi,

1) In MDB React How to use Keyboard key events?? like if I have to use 'Enter' key for MDB Buttons and to Select any value of MDB Dropdown or MDB Select.

2) While using MDB Input and MDB Select in the same page or same form,I can shift from MDB Input to MDB Select using 'Tab' key of keyboard but after that How can I select values of that MDB Select using 'Down Arrow or Up Arrow' Key of keyboard??

Jakub Chmura staff premium answered 5 years ago

Hi @rashesh patel,

I've tested a form with buttons select and dropdown component and I see that we have a problem with targeting MDBSelect by the keyboard events. But other component works properly. You can focus on inputs and buttons by clicking the tab on your keyboard. When you focus a dropdown you can open it by clicking space or enter. If you want to confirm your choice you need to click space. The same on the button component, If you want to confirm form you need to click space.

I can tell you that we currently working on the MDBSelect component, we will try to fix this as soon as possible.

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba

rashesh patel commented 5 years ago

Hi Jakub,

As I am using ' Login Forms' ,in that 'sign in' button is operated by 'space' or 'Enter' key of keyboard when focus comes on that button only.

I want use that 'Enter' key operate immediately after filing all input filed of that particular form(means after filing all filed & instead of using 'tab' button for focusing that sign in button, directly use 'Enter' button to operate sign in button.)

Jakub Chmura staff premium answered 5 years ago

Hi @rashesh patel,

For now, it's not possible because we don't have any function/props that will submit the form by keyboard after filling all inputs.

I think it's a nice feature so I added this to our feature list and we try to implement this soon.

Best regards,

Kuba

rashesh patel commented 5 years ago

Hi Jakub,

Please let me know after implementing the same.

Jakub Chmura staff premium commented 5 years ago

@rashesh patel, Ok. If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba

rashesh patel answered 5 years ago

Hi,

How to use any other key instead of 'tab' key to shift from one input to other input fields or one auto-complete field to other auto-complete fields or one input fields to other auto-complete fields??

In short, I have to use other keys instead of 'tab' to shift one field to other fields.

Jakub Chmura staff premium answered 5 years ago

Hi @rashesh patel,

You can write your own logic to switch between the components MDBSelect orMDBAutocomplete. For now, this cannot be achieved by default, because we only implemented the "tab" key to move between elements on which you can focus.

We are planning major changes to these components and can introduce support for additional keys. Do you have any suggestions on what other keys should change the focus between the items?

Best, Kuba

rashesh patel commented 5 years ago

Hi, I want to use 'Enter' and 'Tab' both keys to move between elements.

Jakub Chmura staff premium commented 5 years ago

Hi @rashesh patel,

Thank you for feedback. As @Piotr Glejzer said we will add more functionality at major release, and I added your suggestion to our feature request list.

Best, Kuba

rashesh patel commented 5 years ago

Hi Jakub,

When will that major update come??

Jakub Chmura staff premium commented 5 years ago

It's hard to determine when this can happen. We don't want to rush to do everything as best we can. If everything goes well, the major will be ready in about a month or two.

Best.

Piotr Glejzer staff answered 5 years ago

Hi,

I added a simple example of how to use buttons with enter key in forms.
https://mdbootstrap.com/docs/react/forms/basic/#form-example

And I close this topic because we will add more functionality in autocomplete/select/dropdown in the major release. If you have more suggestion you can put a comment into created answers.

Best regards,
Piotr

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
keyboard-event
About author
rashesh patel
405Support score
43Questions 19Answers
0Snippets likes 0Snippets