pqGrid v11 Cannot Input Text When Moving Focus to Editable Cell with Null Value

[luckduck]

Hello,

I would like to report an issue observed in pqGrid v11 regarding editor behavior.

When the focus is initially on a cell with editable: false, and then moved (via keyboard navigation) to another cell that is editable but has a null value, the editor becomes active but does not allow text input immediately. The user must click the cell again with the mouse before text input works properly.

This behavior causes inconvenience, especially when navigating cells using the keyboard and attempting to enter text by pressing Enter.

You can reproduce this issue using the demo page below:
https://paramquery.com/pro/demos/edit_multiline

After navigating to the page, apply the following modifications:

Code: [Select]

var colM = [{
        title: "Auto size editor (Enter for new lines)",
        width: 200,
        dataIndx: "ShipAddress1",
        editable: false,
        editModel: {
            saveKey: ''
        }
    },
    {
        title: "Auto size editor (Alt-Enter for new lines)",
        width: 200,
        dataIndx: "ShipAddress2"
    },
    {
        title: "Manually resizable editor",
        width: 200,
        dataIndx: "ShipAddress3",
        editor: {
            type: "textarea",
            attr: "rows=8 cols=58",
            style: "resize:both;",
            appendTo: 'grid'
        },
        editModel: {
            saveKey: ''
        }
    }
];

var dataModel = {
    location: "remote",
    dataType: "JSON",
    method: "GET",
    url: "/content/invoice.json",
    getData: function(response) {
        response.data.forEach(function(rd) {
            rd.ShipAddress1 = rd.ShipAddress2 = rd.ShipAddress3 =
                rd.ShipAddress + "\n" +
                rd.ShipCity + "\n" +
                (rd.ShipRegion || "") + "\n" +
                rd.ShipPostalCode;
        });
        return response;
    }
};

$("div#grid_custom_editing").pqGrid({
    title: "Shipping Orders",
    dataModel: dataModel,
    colModel: colM,
    autoRow: true,
    scrollModel: {
        autoFit: true
    },
    columnTemplate: {
        valign: 'center'
    },
    create: function(evt, ui) {
        this.widget().pqTooltip();
    },
    editModel: {
        clicksToEdit: 1,
        keyUpDown: false
    },
    numberCell: {
        show: false
    },
    resizable: true
});

Please refer to the attached screenshots for the test scenario and behavior.

Thank you for your support.

[paramvir]

Thank you for the details, I'm able to reproduce the issue.

[luckduck]

If the issue has been resolved, could you share the updated source code?

[paramvir]

The fix to the issue is not available yet.

[luckduck]

Yes, this issue is occurring on a live production site, so a quick fix is required.
I will continue monitoring this thread.

Please share the updated code once the fix is completed.
Thank you.

[paramvir]

Please use this fix and let me know the result

Code: [Select]

jQuery.paramquery.cKeyNav.prototype.resetFocusMgr=function(t,e={},n,a){var i,r=t.children(),d={textbox:"input",textarea:"textarea",contenteditable:"div[contentEditable]"}[e.type]||"textarea",o=e.attr||"";return i=r,(!("div[contentEditable]"==d?i.is("div")&&"true"==i.prop("contentEditable"):i.is(d))||1!=r.length||o)&&(t.html({input:"<input "+o+(o.includes("type")?"":" type='text'")+"/>",textarea:"<textarea "+o+"></textarea>","div[contentEditable]":"<div contenteditable='true' tabindex='0' "+o+"></div>"}[d]),r=t.children()),n&&!("ontouchstart"in window)||r.attr(r.is("div")?{contenteditable:!1}:{readonly:!0}),t[0].className="pq-focus-mgr ui-widget-content",r};


[luckduck]

I have verified that the code you provided is working correctly. Thank you.