editOnFocus and keys navigation not working together

editOnFocus and keys navigation not working together

keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0

Good Evening!

I'm using Editor and my tables use inline editing with editOnFocus = true. I also have the keys plugin on my tables for navigation purposes. What I would love to do is have a user be able to tab to columns and arrow up and down to row with each cell focus putting them into edit mode and every tab/arrow up&down exiting edit more for that cell and moving to the next cell.

Right now the arrow navigation up and down does not work but the tab does. I'm not sure why.

So this is my code for the datatable settings.

         var editorSettings = {
            table: this.selector,
            formOptions: {
                inline: {
                    onReturn: "submit",
                    onBlur: "submit",
                    submit: "allIfChanged",
                    drawType: 'page'
                },
                //used by autofill
                bubble: {
                    submit: "allIfChanged",
                    drawType: 'page'
                }
            }
        };

        this.editor = new $.fn.dataTable.Editor(editorSettings);





        var keyCodes = [];

        //ignore left and right arrows so we can still navigation in the cell during edit mode.
        for (var i = 8; i <= 222; i++) {
            if (i !== 37 && i !== 39) {
                keyCodes.push(i);
            }
        }

        var datatableSettings = {
            lengthMenu: [[100, 500, -1], [100, 500, "All"]],
            pageLength: 100,
            deferRender: true,
            fixedHeader: true,
            keys: {
                editor: this.editor,
                keys: keyCodes,
                editOnFocus: true
            },
            autoFill: {
                editor: this.editor
            },
        };

        this.datatable = $(this.selector).DataTable(datatableSettings);

As you can see I'm defining which keycodes are valid, but even if I remove that bit of code and just allow all keycodes I still cannot navigate with the arrow keys in and out of edit mode.

I hope this make sense.

Cheers

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @keith.abramo ,

    Is this example here what you're after? This is using both arrows keys and the tab.

    Cheers,

    Colin

  • keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0
    edited November 2019

    Hey Colin,

    No this is not what I'm after since this does not use the editOnFocus: true feature as described in my question.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Built a test case that replicates your issue:
    http://live.datatables.net/vagapezu/3/edit

    Not sure how to fix it though.

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Me too - it's on Allan's todo list! :)

  • keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0

    Thanks @kthorngren ! This is exactly my problem. I'm glad it is on Allan's todo list though :smile:

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    So what is happening here is that KeyTable has two editing modes:

    1. "Soft edit" - arrows keys and tab navigation work to move the cell focus. Soft edit has a blue border around the cell.
    2. "Hard edit" - arrows keys move the I beam cursor inside the text box. Tab will still move to the next cell. Hard edit has an orange border around the cell.

    The keys.editOnFocus option will always (currently) trigger a hard edit due to this line. Change the third parameter on that line to false and it would be a soft edit.

    Based on this discussion, perhaps keys.editOnFocus should allow for:

    • false - Disabled
    • true - Enabled - hard edit
    • hard - Enabled - hard edit
    • soft - Enabled - soft edit.

    Would that suit you needs @keith.abramo ?

    Allan

  • keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0

    Hey Allan,

    Based on your comment and wording, the end resulting functionality I need would be;

    1) When a user clicks on a cell it goes into hard edit mode.
    2) While in hard edit mode of a cell, a user can press the up and down arrows and datatatable will move to the next cell up or down
    3) Once the focus have moved to the next cell, editor will automatically put that cell into hard edit mode.

    Also, implicitly, since in my example I have submitOnBlur, when they press up or down, the editor triggers a submit event on the cell that was just blurred.

    So if I can set key.editOnFocus: 'hard' to do that, then that would be great!

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    While in hard edit mode of a cell, a user can press the up and down arrows and datatatable will move to the next cell up or down

    No - I'm afraid that when in "hard edit" the arrow keys are used only for the cursor position in the input element. Are you saying you want the left and right arrow keys to move the cursor, but up and down to move cell?

    As a Linux (and Mac) user that would be really frustrating since up / down will take you to the start or end of the text in the input.

    Allan

  • keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0

    Hey Allan,

    Yep, that is what I would like to happen per my client's request. I'm just the messenger after all :)

    If this is not something which you think would fit well into datatables as a feature, do you have any tips as to some custom logic I could apply to get this interaction to happen using datatables?

  • keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0

    Hey Allan,

    I'm playing around with doing this myself using keytable api methods. I see keys.move in the documentation but it references version 2.6. I can currently only get 2.5.1 from the download builder. Is this something which can be corrected easily to make 2.6 available?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    That's a 'bug' in the documentation - that came in 2.5.1. I think Allan made a '.' release rather than a full release. I'll update the docs.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    I really had actually meant to release that as 2.6.0... Doh. The new API method meant it should have been a 2.x release (following semver). Oh well - 2.5.1 is the current release with all the latest methods.

    Allan

  • keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0

    I had downloaded the latest from the download builder yesterday and that function was not in there as part of the api. Only Disable and Enable were.

    I'll try it again today, maybe you have changed something since then and it's in there now?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @keith.abramo ,

    i just tried it, and it's there for me in the 2.5.1 release, see here:

    https://cdn.datatables.net/v/dt/dt-1.10.20/kt-2.5.1/datatables.js

    DataTable.Api.register( 'keys.move()', function ( dir ) {
        return this.iterator( 'table', function (ctx) {
            if ( ctx.keytable ) {
                ctx.keytable._shift( null, dir, false );
            }
        } );
    } );
    

    Could you try again, please.

    Cheers,

    Colin

  • keith.abramokeith.abramo Posts: 37Questions: 6Answers: 0

    Thanks Colin, this fixed the issue for me. I did have another issue where datatable was trying to do org.preventDefault() where "org" was the event in the key.move() callstack. However, when called programmically, this variable is null so it was throwing an error. I edited my datatable code to just check for this and it seemed to fix my issue. Not sure if you have seen this.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    No, we're not aware of that. Are you able to link to a page that demonstrates that? It would help to diagnose it.

    Colin

This discussion has been closed.