Topic: Keyboard Function
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??
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
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 free commented 4 years ago
Hi, I want to use 'Enter' and 'Tab' both keys to move between elements.
Jakub Chmura staff commented 4 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 free commented 4 years ago
Hi Jakub,
When will that major update come??
Jakub Chmura staff commented 4 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.
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.
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 free commented 5 years ago
Hi Jakub,
Please let me know after implementing the same.
Jakub Chmura staff 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
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 free 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.)
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: 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