Integration of select and keytable with keyboard navigation

Integration of select and keytable with keyboard navigation

filiphrfiliphr Posts: 7Questions: 2Answers: 2

Hi,

I have a technical question regarding the select and keytable extension. The reason for my question is that we are migration from an older framework (not Datatables) and we would like to keep the same behavior as we had before.

I would like to make my table be multi selectable and plus selectable by using the arrow keys up and down.

Here is a jsfiddle of my example. https://jsfiddle.net/57rtdxt0/. It is not working as expected, since the current fired events by the keytable are not enough. If I add a custom event in the keytable code which is fired after the shift operation I can achieve what I want. Additionally, if the arrow events also invoke the 'key' event or the keyevent is passed in the 'key-focus' and or the 'key-blur' events, then it would be also doable.

Is there something that I am not seeing and that would make it possible for me to do what I want?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,985Questions: 1Answers: 10,162 Site admin

    Hi,

    Thanks for your question, however, I'm afraid I'll need to ask for a clarification :-). I'm not quite sure I understand how you want the key interaction to work. The example you linked to has keys enabled, but not shown. How would you know which row you are focused on?

    I've updated the example to this: https://jsfiddle.net/57rtdxt0/1/ . IMPORTANT - for some reason it isn't focusing on initial click, but the arrow keys will then change the row selection. Is that want you want (minus the initial click error, which I need to look into)?

    Allan

  • filiphrfiliphr Posts: 7Questions: 2Answers: 2

    In my use case I would like to use the keys for row selection. I do not care about the focused cell.

    Your example works correctly (i.e. the row is selected correctly). However, I would like to have a multi (os) selection as well. With the current api that is not possible.

    From what I looked the key-focused event is fired every time a cell is focused (also on mouse click) with this all the rows are deselected and then only the focused one is selected.

    The only workaround I found to achieve what I want is to modify the keytable js and add focus-shift event when a focus is called from the _shift function. However, this is a dirty workaround, and I wanted to ask what would be the best solution.

    Another workaround would be to pass emit the key event for all keys, or have a special event that would fire directional events (the arrows, page up, page down, etc).

  • allanallan Posts: 61,985Questions: 1Answers: 10,162 Site admin

    I see what you mean - thanks for the clarification. You are correct - there isn't currently a good way to do this. I'd be tempted to use a return key listener to add and remove items from the selection if you want multi-row selection. i.e. focus on a cell / row and press return to toggle its selection state.

    Regards,
    Allan

  • filiphrfiliphr Posts: 7Questions: 2Answers: 2
    Answer ✓

    This would be an interesting idea. I am not only sure if it is something that the user would fill natural, we are migrating from another framework, and it is not really desirable to change something which our users are accustomed to. Although this can be an extension, since doing Ctrl + Up/Down changes the focus, with this we can have someone do an entire multi selection with the keyboard.

    I would more like to have the possibility to have all the pressed keys send via the key event. This way one can build a key selection plugin (also having Shift + Up/Down just adding to the selection).

    Are you willing to modify the api, or add a new event that would allow the desired behavior?

    Cheers,
    Filip

  • allanallan Posts: 61,985Questions: 1Answers: 10,162 Site admin

    Honestly I'm not sure :-). I'd rather not add code just for a single use case, which I hope you'll understand. If it is more useful generally I'd be happy to, but I'm not sure when this would be useful for anything else.

    Perhaps key-focus should pass in another argument to say if the focus came form a click or a key event. That would resolve the issue (I think) since you could just do an if condition on that.

    Allan

  • filiphrfiliphr Posts: 7Questions: 2Answers: 2

    The additional argument will suffice for my use case.

    However, if you are willing to have the possibility for a complete keyboard selection, the keyboard event is needed. Is this possible? If this event is passed, then one can do the keyboard selection correctly (with multi selection on Enter and so on).

  • allanallan Posts: 61,985Questions: 1Answers: 10,162 Site admin

    100% keyboard control isn't really a goal of KeyTable - if you need that just listen for the key events in your own listeners. Having said that it does trigger the key event at the moment.

    Allan

  • filiphrfiliphr Posts: 7Questions: 2Answers: 2

    I understand that the goal of the KeyTable is not that. I saw that the key event is passed. I will try to find some way to do my desired actions if possible.

    Let me know if you decide to add the location of the key-focus event.

    Thanks a lot for your input, it helped me a lot to better understand the plugin.

This discussion has been closed.