In IE10 Slickgrid tabbing breaks

Question

Hi I have a slickgrid table that works perfectly in IE8, in IE10 the tabbing breaks.

On the page there is a form that is used as a filter to change what Slick Grid displays. It has a number of text boxes.

If I click into an editable cell and enter a value and then press the tab key. The next column is highlighted as expected but the cursor jumps up to the first text box of the form.

I have updated Slick Grid to the latest version

My columns are defined like this

var columns = [
        { id: 'ParameterOrder', name: 'Order', field: 'ParameterOrder', width: 50 },
        { id: 'CanEnableManualChange', name: 'Enable Manual Change', field: 'CanEnableManualChange', cssClass: 'center', formatter: Slick.Formatters.Checkbox, editor: Slick.Editors.Checkbox, width: 100 },
        { id: 'Name', name: 'Parameter Name', field: 'Name', editor: Slick.Editors.Text, width: 185},
        { id: 'ParameterType', name: 'Parameter Type', field: 'ParameterType', editor: Slick.Editors.Text, width: 185},
        { id: 'LowSpecLimit', name: 'Low Spec Limit', field: 'LowSpecLimit', editable: isEipEditable, focusable:true , editor: Slick.Editors.DecimalEditor, width: 115, valueChangedEvent: trackChangesFunction },
        { id: 'LowControlLimit', name: 'Low Control Limit', field: 'LowControlLimit', editable: isEipEditable, focusable:true, editor: Slick.Editors.DecimalEditor, width: 115, valueChangedEvent: trackChangesFunction },
        { id: 'NominalValue', name: 'Nominal Value', field: 'NominalValue', editable: isEipEditable, editor: Slick.Editors.DecimalEditor, width: 115, valueChangedEvent: trackChangesFunction },
        { id: 'HighControlLimit', name: 'High Control Limit', field: 'HighControlLimit', editable: isEipEditable, editor: Slick.Editors.DecimalEditor, width: 115, valueChangedEvent: trackChangesFunction },
        { id: 'HighSpecLimit', name: 'High Spec Limit', field: 'HighSpecLimit', editable: isEipEditable, editor: Slick.Editors.DecimalEditor, width: 115, valueChangedEvent: trackChangesFunction },
        { id: 'ParameterCategoryId', name: 'Parameter Category', field: 'ParameterCategoryId', options: Slick.OptionArray.MakeFromHtmlSelectList($("#DefineParameter_ParameterCategoryId")), formatter: Slick.Formatters.SelectList, editor: Slick.Editors.SelectCellEditor, width: 115 }
    ];

EDIT: This is an extension on slickGrid I found in the project I'm working on

$.extend(true, window, {
mySlick: {
    getGrid: function (container, data, columns, options) {
        var editOptions = mySlick.refreshEditOption(columns, options.editable);
        options.actualGridEdit = options.editable;
        options.editable = editOptions.isGridEditable;

        return new Slick.Grid(container, data, editOptions.columns, options);
    },

    refreshEditOption: function (columns, isGridEditable) {
        var editableColumns = _.filter(columns, function (item) { return item.editable != null && item.editable; });

        var nonEditableColumns = _.filter(columns, function (item) { return (item.editable == null || !item.editable) && !isGridEditable; });

        if (editableColumns.length > 0 && !isGridEditable) {
            // make the grid editable
            isGridEditable = true;

            // sets non editable columns to readonly by removing Editor property
            _.each(columns, function (item) {
                if (item.editable == null || !item.editable) {
                    delete item.editor;
                }
            });
        }

        if (nonEditableColumns.length > 0) {
            // sets non editable columns to readonly by removing Editor property
            _.each(columns, function (item) {
                if (item.editable == null || !item.editable) {
                    delete item.editor;
                }
            });
        }
        return { columns: columns, isGridEditable: isGridEditable };
    }
}
});

This is called

var data = JSON.parse($('#DefineParameter_ParametersObject').val() || null) || [];

var options = {
        editable: isGridEditable,
        enableCellNavigation: true,
        autoEdit: true,
        enableColumnReorder: false,
        orderField: 'ParameterOrder'
    };

grid = mySlick.getGrid('#DefineParametersGrid', data, columns, options);

Answer 1

Hi this issue seems to have solved itself after updating our version of JQuery to the latest version. I'm not sure what caused it or why it was happening but is is fixed now.