jqGrid - OnSelectRow editable fields not focusing on click in Firefox

Question

I am using jqGrid and the OnSelectRow function to editing a row in a Grid. When I select on the row the cell I selected will take the focus yet, on Firefox, when I try to click to another cell in the same row it will not draw the focus. I either need to tab to it or select our of the row and back into it.

It works fine in Chrome.

Here is the code:

    gridElement.jqGrid({
    url: $.url("/MyURL"),
    postData: {
        ID: function () { return $('#IDVAL').val(); }
    },
    datatype: "json",
    mtype: "POST",
    colNames: ['Name', 'Numbers', 'Options', 'TextBox', 'Hide'],
    colModel: [
       { name: 'Name', index: 'Name', width: 200, hidden: false },

       { name: 'Numbers', index: 'Type', width: 120, editable: true, edittype: "select", editoptions: { value: { 0: 'None', 1: 'One', 2: 'Two' }, dataInit: function (elem) { $(elem).width(85); } } },
       { name: 'Options', index: 'Summary', width: 120, editable: true, edittype: "select", editoptions: { value: { 0: 'None', 1: 'Option 1', 2: "Option 2" }, dataInit: function (elem) { $(elem).width(85); } } },
       { name: 'TextBox', index: 'TextBox', width: 300, edittype: "text", editable: true, editoptions: { size: "50", maxlength: "100"} },
       { name: 'Hide', index: 'Hide', width: 80, editable: true, edittype: "checkbox", editoptions: { value: "true:false"} }
          ],
    rowNum: 50,
    width: 800,
    height: "auto",
    loadtext: "Please wait...",
    viewrecords: true,
    hidegrid: false,
    onSelectRow: function (id) {
        if (id && id !== lastselref) {
            gridElement.saveRow(lastselref, false, 'clientArray', '');
            gridElement.jqGrid('restoreRow', lastselref);
            gridElement.jqGrid('editRow', id, true);

            lastselref = id;

        }
    },
    forceFit: true
});

score 2 · Accepted Answer · edited May 23 '17 at 10:32

There are some strange parts of your code which I would suggest you to change, but before all I want to point on the problem with the focus which you have.

The problem is that jqGrid search first for the index of the first editable cell in the row (see the line) and then set it only of <input> element of the cell skipping the <select> which you have (see the line):

setTimeout(function(){$("td:eq("+focus+") input",ind).focus();},0);

One could fix to the following for example

setTimeout(function(){$("td:eq("+focus+") :input:visible",ind).focus();},0);

Where pseudo selectors :input and :visible will be used like in many other places of jqGrid code.

The demo can be used to reproduce your problem (just lick on a row and try to use arrow buttons to see that focus was not set on the select element in the editing row) and another demo used the fixed code of jqGrid.

I reported the bug and my suggestion as the following pull request.

Some other small remarks to your code:

I don't recommend to you different values for name and index properties of colModel (name: 'Numbers', index: 'Type' and name: 'Options', index: 'Summary'). If you really required to use for server side sorting the index other as the propety name in the input data then it would be better to use jsonmap instead of name. For example name: 'Type', index: 'Type', jsonmap: 'Numbers'. In general I recommend don't use index property at all. In the case the value of name property will be used: name: 'Type', jsonmap: 'Numbers'.
You should consider to use loadonce: true in you have not so much total rows of data.
You should always use gridview: true option to improve performance of the grid (see the answer)
I recommend you to use autoencode: true option which force jqGrid to interpret the input data as text instead of HTML fragments.

UPDATED: The pull request which I posted is already merged to the main code of jqGrid. So the described above changes ("td:eq("+focus+") input" to "td:eq("+focus+") :input:visible") will be in the next release of jqGrid.

jqGrid - OnSelectRow editable fields not focusing on click in Firefox

1 Answers1