PrimeFaces Datatable editable row is not working - primefaces

Question

I had implement editable p:datatable. After I click on the edit button and change the value, the Edit and Cancel button is not working, and the row just keep open to edit. May I know any mistake I am facing?
The code is
<p:panel>
<p:messages id="tableMessages" autoUpdate="true" closable="true" />
<p:dataTable value="#{bean.dataList}" var="data"
id="table" editable="true">
<p:ajax event="rowEdit" listener="#{bean.onRowEdit}"/>
<p:ajax event="rowEditCancel" listener="#{bean.onRowCancel}"/>
<p:column>
<f:facet name="header">
<h:outputLabel value="ID" />
</f:facet>
<h:outputText value="#{data.id}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Name" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{data.name}" />
</f:facet>
<f:facet name="input">
<p:inputText id="editName" value="#{data.name}">
<f:validateLength minimum="3" maximum="30" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Gender" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{data.gender}" />
</f:facet>
<f:facet name="input">
<p:inputText id="editGender" value="#{data.gender}">
<f:validateLength minimum="3" maximum="30" />
</p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<f:facet name="header">
<h:outputLabel value="Edit" />
</f:facet>
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panel>