Keyboard problems with select field

joeyfresh87

Hello,

I am using Editor with KeyTable and inline editing, and I have some "select" (drop-down) fields in my DataTable. I am working in IE, so when a select cell is highlighted, I can push Alt + Up or Alt + Down, and the drop-down list opens. However, I cannot navigate up and down the list with the arrow keys, because as soon as I hit an arrow key, the list closes and the focus jumps to an adjacent cell (because of KeyTable, I assume).

I have tried the workaround proposed in a comment on this thread (https://datatables.net//forums/discussion/35820) -- that is, disable KeyTable on "Alt" keydown event -- but that has just introduced more problems for me. Has there been a fix implemented in more recent updates of DataTables/Editor? Or, does an easier work-around exist?

I've posted some of my code below, including handling of the Enter key. "nameDt" is the name of the variable that holds my DataTable. The "MarketSegment" and "SIC" fields are the two select fields in my table. I wanted the drop-down to be activated as soon as the cell is in focus. ("#nameView" is the ID of my HTML table element.) The code works decently, but when you are navigating in the list and you press Enter, you then cannot press Alt + Down again to re-open the list. (Also, handling the Escape key introduces its own problems.)

Thanks,
Joe

nameDt.on('key-focus', function (e, datatable, cell, originalEvent) {
    focusedColIdx = cell.index().column;
    focusedRowIdx = cell.index().row;
    var cellDataField = nameDt.column(focusedColIdx).dataSrc();
    if (cellDataField == "MarketSegment" || cellDataField == "SIC") {
        nameEditor.inline({ row: focusedRowIdx, column: focusedColIdx }, {
            onEsc: 'none'
        });
        $('#nameView').keydown(function(event){
            if (event.which == 18) {
                event.preventDefault();
                nameDt.keys.disable();
            }
        });
        $('#nameView').keydown(function (event) {
            if (event.which == 13) {
                $('td.focus select').blur();
                nameEditor.inline({ row: focusedRowIdx, column: focusedColIdx }, {
                    onEsc: 'none'
                });
                $('div.DTE_inline select').focus();
                nameDt.keys.enable();
            }
        });   
        nameDt.one('key-blur', function (e, datatable, cell) {
            nameEditor.submit();
        });
    }
});

allan

Hi Joe,

Thanks for posting this. Let me get back to you on this one if that's okay - I've run out of time today I'm afraid.

Thanks,
Allan

joeyfresh87

Hi Allan,

I eventually built enough code to handle just about every case, in order to get the keyboard interaction how I want it. A relevant portion of my code is below -- as you can see, it's quite involved. In fact, I decided to detach editor from KeyTable altogether, and manually handle every "key" event (as described in some of your documentation). The following function is called whenever key-focus transfers to a cell that is a drop-down.

function HandleDropdownFocus(htmlTableName, datatable, cell, editor) {
    console.log('HandleDropdownFocus fired.');
    datatable.off('key');
    var origValue = cell.data();
    var keysEnabled = true;

    editor.inline({ row: cell.index().row, column: cell.index().column }, { // activate inline edit immediately
        onEsc: 'none',
        onReturn: function (editor) {
            console.log('editor onReturn fired');
            MoveFocusOnReturn(datatable, cell);
        }
    });
    if (editor.inError()) {
        editor.close(); // close and re-open
        editor.inline({ row: cell.index().row, column: cell.index().column }, {
            onEsc: 'none'
        });
    }
    $('#' + htmlTableName).keydown(function (event) {
        console.log('nameView keydown event');
        if (event.altKey && (event.keyCode == 38 || event.keyCode == 40)) { // 38 = up arrow; 40 = down arrow
            if (keysEnabled == true) {
                keysEnabled = false;
                datatable.keys.disable();
            } else if (keysEnabled == false) {
                keysEnabled = true;
                datatable.keys.enable();
            }
        }
        if (event.keyCode == 32) {  // 32 = space bar
            if (keysEnabled == true) {
                keysEnabled = false;
                datatable.keys.disable();
            }
        }
        if (event.keyCode == 13) {  // 13 = Enter key
            if (!keysEnabled) {
                event.stopPropagation();    // prevents auto-Submit; so now, pressing Enter just makes the selection
                $('td.focus select').blur();
                keysEnabled = true;
                datatable.keys.enable();
                $('td.focus select').focus();
            }
        }
        if (event.keyCode == 27) {  // 27 = Esc key
            $('td.focus select').blur();
            $('td.focus select').val(origValue);
            keysEnabled = true;
            datatable.keys.enable();
            $('td.focus select').focus();
        }
        if (event.keyCode == 9) {   // 9 = Tab key
            if (!keysEnabled) {
                event.preventDefault();
                event.stopPropagation();
                keysEnabled = true;
                datatable.keys.enable();
                MoveFocusOnReturn(datatable, cell);
            }
        }
    });
    datatable.one('key-blur', function (e, datatable, cell) {
        editor
            .blur()
            .submit();
    });
}

allan

Thanks for posting back. Great to hear you've got it working as you need.

Allan

billsimmeth

@joeyfresh87 I'm struggling with similar issues and greatly appreciate you posting your solution. May I ask if you could share your function "MoveFocusOnReturn" referenced in the above code? Thanks in advance.