Chrome vs. IE functionality

DaveNavarro

Hello,

I'm using KeyTable to provide Excel like navigation / editing to an in-line editing datatable.

What I've found is that our browsers act differently when working with KeyTable.

Google Chrome seems to work correctly whilst Internet Explorer doesn't provide the same enter key / arrow key functionality.

With Chrome; users can navigate to a cell via the arrow keys and press enter. This will set focus on the cells 'select list' and 'drop' the list for viewing. User then use the arrow keys (up / down) to make their option selection and press the enter key to complete the selection.

With Internet Explorer; users can navigate to a cell via the arrow keys and that's it. The enter key has no effect on the contents of the cell (the select list).

Is there something I can do to match the functionality found in Google Chrome?

Please let me know and thanks,

~ Dave

allan

Hi Dave,

Is the problem you describe apparent for you in this example? It appears to work okay for me in IE.

What version of IE are you using?

Allan

DaveNavarro

Hello Allan,

I'm using IE 11.0.9600.x.

The example works for me too except for the Date column. When I click Enter while on the Date field a pop up calendar opens however, my keys do not navigate through the days of the month. Instead they move the selected cell to the next cell (behind the calendar) and leave the calendar in view.

This is similar to what I'm seeing with the field "type: select" in my EditTable.

I can navigate to the cell but, pressing enter does not cause the select list to appear. It works as I've described in Chrome but not IE.

I hope this description helps.

Thanks for helping again!

~ Dave

allan

the Date field a pop up calendar opens however, my keys do not navigate through the days of the month. Instead they move the selected cell to the next cell

There is no option to use keyboard navigation inside the calendar view at the moment I'm afraid. The bug here is that when KeyTable moves the focus on to a different element it should automatically close the calendar view, which it isn't. I've just committed a fix for that into Editor and it will be included in the next release.

The select cells are going to have a similar issue. If you want to use keyboard navigation for the select element you would need to disable KeyTable and stop it from "hijacking" the keyboard navigation with keys.disable().

Regards,
Allan

DaveNavarro

Hello Allan,

Thank you for the suggestions. Are you thinking I could disable KeyTable for that brief moment when the select element gets focus and then enable it again once the user has completed their data entry?

Also, should I consider testing select2? Or, do you think it will act in a similar manner?

Please let me know and thanks!

~ Dave

DaveNavarro

Hello Allan,

With your help I was able to implement a work-around that should be acceptable to our users.

The basic problem was that the Select Lists were not opening (dropping in IE) when given focus via keyboard navigation (arrows and enter keys).

The magic key combination (in IE) is Alt-Down Arrow. That will drop the list. HOWEVER... as you pointed out, keyTable is in control of the keyboard. So, I wired up the 'keydown' event to listen for the Alt key in the input fields. When it comes in I disable the keytable.

I also wired up the .on("change") event to enable the keytable after the user makes their selection.

So, for now this should work. If a better solution come along I'll certainly update this thread.

Thanks again for all your help!

Case closed.

~ Dave

allan

Hi Dave,

Fantastic - good to hear you've got it working. I think this is probably the best option at the moment, but I've filed an enhancement bug for KeyTable to improve this interaction and have it work automatically in future.

Allan