按下Tab键时会触发CellEdit事件

Question

My problem is that when I press tab button while editing datatable , cells of datatable are closed and CellEdit event fires more and more. It force me to press left click any ware in the screen to prevent firing cell edit event.

on cell method I do some calculations to appear in footer. So it loses cursor focus.

I am using jsf 2.2 and primefaces 6.1.

My goal is when I edit on quantity, do my calculations and update footer row and total and net columns, then press tab cursor appear in price cell

I've tried to just update only p:columnGroup footer but failed.

I tried to use a:autofocus but also fails.

 <p:remoteCommand name="onCellEdit" update="invInventoryTable" />
 <p:dataTable  var="invInventoryTable"
   widgetVar="invInventoryTable"
   rowIndexVar="index" 
   rowKey="#{invInventoryTable}"
   selectionMode="single"
   selection="#{invPurchaseOrderFormMB.invPurchaseOrderDetailEntitySelection}"
   dir="rtl" 
   emptyMessage="#{userData.userDDs['EMPTY_TABLE']}"
   editable="true"
   editMode="cell"
   value="#{invPurchaseOrderFormMB.invPurchaseOrderEntity.invPurchaseOrderDetailEntityList}"
   id="invInventoryTable">
     <p:ajax event="cellEdit" listener="#{invPurchaseOrderFormMB.onCellEdit}" oncomplete="onCellEdit()"/>

     <p:column style="width:7vh;font-size:1.6vh;text-align: right" a:autofocus="#{invPurchaseOrderFormMB.focus}" id="Quantity" headerText="QUANTITY">
         <p:cellEditor>
             <f:facet name="output">
                 <h:outputText value="#{invInventoryTable.quantity}"  />
             </f:facet>
             <f:facet name="input">
                 <p:inputText id="QuantityT" a:autofocus="#{invPurchaseOrderFormMB.focus}" value="#{invInventoryTable.quantity}"  style="width:90%"/>
             </f:facet>
         </p:cellEditor>                        
     </p:column>

     <p:column style="width:7vh;font-size:1.6vh;text-align: right" id="Price" headerText="PRICE">
         <p:cellEditor>
             <f:facet name="output">
                 <h:outputText  value="#{invInventoryTable.price}"  />
             </f:facet>
             <f:facet name="input">
                 <p:inputText id="PriceT" value="#{invInventoryTable.price}"  style="width:100%"/>
             </f:facet>
         </p:cellEditor>                        
     </p:column>

     <p:column style="width:7vh;font-size:1.6vh;text-align: right" id="Discount" headerText="DISCOUNT">
         <p:cellEditor>
             <f:facet name="output">
                 <h:outputText value="#{invInventoryTable.discountRate}"/>
             </f:facet>
             <f:facet name="input">
                 <p:inputText id="DiscountT" value="#{invInventoryTable.discountRate}"  style="width:100%">
                 </p:inputText>
             </f:facet>
         </p:cellEditor>                        
     </p:column>

     <p:column style="width:7vh;font-size:1.6vh;text-align: right"  id="total" headerText="TOTAL">
         <h:outputLabel id="totalVal" value="#{invInventoryTable.total}"  />
     </p:column>

     <p:column style="width:7vh;font-size:1.6vh;text-align: right" id="NET" headerText="NET">
         <h:outputLabel id="netVal" value="#{invInventoryTable.net}"  />
     </p:column>

     <p:columnGroup type="footer">
         <p:row>
             <p:column colspan="4" style="text-align:right" footerText="TOTAL  :" />
             <p:column id="qtyId" footerText="#{invPurchaseOrderFormMB.totalQuatity}" />
             <p:column/>
             <p:column/>
             <p:column id="totId" footerText="$#{invPurchaseOrderFormMB.total}" />
             <p:column id="totNetId" footerText="$#{invPurchaseOrderFormMB.totalNet}" />
             <p:column/>
             <p:column/>
             <p:column/>
             <p:column/>
             <p:column/>
         </p:row>
     </p:columnGroup>

 </p:dataTable>

Answer 1

I had develop something like this in my project . my solution is to disable datatable cell edit and use ajax just for the quantity cell as i want :

<p:dataTable  var="invInventoryTable"
                              widgetVar="invInventoryTable"
                              rowIndexVar="index" 
                              rowKey="#{invInventoryTable}"
                              selectionMode="single"
                              selection="#{invPurchaseOrderFormMB.invPurchaseOrderDetailEntitySelection}"
                              dir="rtl" 
                              emptyMessage="#{userData.userDDs['EMPTY_TABLE']}"
                              editable="true"
                              editMode="cell"
                              value="#{invPurchaseOrderFormMB.invPurchaseOrderEntity.invPurchaseOrderDetailEntityList}"
                              id="invInventoryTable">


                    <p:ajax event="cellEdit" onstart="return false;" process="@this"/>



                    <p:column style="width:7vh;font-size:1.6vh;text-align: right" a:autofocus="#{invPurchaseOrderFormMB.focus}" id="Quantity" headerText="QUANTITY">
                        <p:cellEditor>
                            <f:facet name="output">
                                <h:outputText value="#{invInventoryTable.quantity}"  />
                            </f:facet>

                            <f:facet name="input">
                                <p:inputText id="QuantityT" a:autofocus="#{invPurchaseOrderFormMB.focus}" 
              onkeydown="if(event.keyCode != 9 &amp;&amp; event.keyCode != 13){onkeydown();
           value="#{invInventoryTable.quantity}"  style="width:90%"

                             <p:ajax event="keydown" listener="#{invPurchaseOrderFormMB.onCellEdit}" update=""/>           
                              </p:inputText>
                            </f:facet>
                        </p:cellEditor>                        
                    </p:column>

i hope it helps :)