editOnFocus and keys navigation not working together

keith.abramo

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

colin

Hi @keith.abramo ,

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

Cheers,

Colin

keith.abramo

Hey Colin,

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

kthorngren

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

Not sure how to fix it though.

Kevin

colin

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

keith.abramo

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

allan

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.abramo

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!

allan

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.abramo

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.abramo

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?

colin

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.

allan

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.abramo

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?

colin

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.abramo

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.

colin

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