'PrimeFaces dataTable - Difference between PF.showCellEditor and cellEditor click

I am trying to work with a p:dataTable that maintains focus in a particular way, which I created following this question I asked earlier. However, I've encountered something which I think is outside the scope of the original question.

For completeness, here is my setup:

A p:dataTable with some variables and a remoteCommand in a form named "addForm":

<h:inputHidden id="focus" value="#{rackView.focus}"/>
<p:remoteCommand name="onCellEdit" update="rackDT" oncomplete="loadFocus();"/>   
<p:dataTable id="myDT" widgetVar="myDT" var="myObj" value="#{myView.objList}" 
    editable="true" editMode="cell">
    <p:ajax event="cellEdit" listener="#{myView.onCellEdit}" oncomplete="onCellEdit()"/>
    <p:column headerText="X">
        <p:cellEditor>
            <f:facet name="output">
                <h:outputText value="#{myObj.x}" />
            </f:facet>
            <f:facet name="input">
                <p:inputText value="#{myObj.x}" />
            </f:facet>
        </p:cellEditor>
    </p:column>
    <p:column headerText="Y">
        <h:outputText value="#{myObj.y}" />
    </p:column>
</p:dataTable>

A listener in the myView:

public void onCellEdit(CellEditEvent edit) {
    if(edit.getNewValue() != null) {
        MyObj myObj = this.objList.get(edit.getRowIndex());
        
        /// Do some stuff to the dataTable object...

        this.workOrders.set(index, workOrder);
    }
}

And some JavaScript:

function loadFocus() {
    var activeElementRow = -1;
    try {
        activeElementRow = parseInt(document.activeElement.parentElement.parentElement.id.split(':')[2]);
    } catch(e) {}
    if((activeElementRow == -1 || activeElementRow != document.getElementById('addForm:focus').value) &amp;&amp; document.getElementById('addForm:focus').value != -1) {
        var index = document.getElementById('addForm:focus').value;
        PF('myDT').widget.showCellEditor($('[role="gridcell"].ui-editable-column:eq(' + index + ')'));
        document.getElementById('addForm:focus').value = -1;
    }
}
$(document).keydown(function(e) {               
    var active = document.activeElement;

    function enterKey(){                    
        if (e.which === 13 &amp;&amp; active.id.includes('j_idt')) {
            try {
                var strArr = active.id.split(':');
                document.getElementById('addForm:focus').value = parseInt(strArr[2]) + (e.shiftKey ? -1 : 1);
            } catch (e) {
                document.getElementById('addForm:focus').value = -1;
            }
            return false;
        }
    }
    if (e.shiftKey) { enterKey() } else { enterKey() }
});

The problem I am facing is when I use enter to move between editable cells. After moving through any number of cells with enter, the cellEditor does not close until I have clicked a different page element twice. Normally, the cellEditor is closed when clicking any other element on the page. Further, trying to click another editable cell after using enter to navigate to a cell will cause the cellEditor for the clicked cell to briefly open, then immediately close, and this keeps occurring any time the cell is clicked until I click a different, non-cellEditor element.

I believe this culprit here is PF.widget.showCellEditor. Is there some operation PrimeFaces performs when clicking an editable cell that calling PF.widget.showCellEditor alone does not?

Edit: I have found that clicking a cell after a widget.showCellEditor is called causes a cellEdit event on the table header of the cell clicked. Not sure why.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source