The tab key does not work when AutoComplete is in a editable DataTable

Viewed 509

I have a p:autoComplete inside a p:dataTable with p:cellEditors. when i push the tab key cursor correctly moves in order between the row elements , for example between inputs and selectOneMenus except AutoComplete, cursor go into AutoComplete but it can't exit from it.

I understood if i delete var in p:autoComplete it works correctly, i think var generate a hidden input that destroyed tabindex, but i can't fix it with tabindex and other ways.

     <p:dataTable id="FieldSoftwareElement_listForm_dataTable"  value="#{classSoftwareElementController.selectedClassSoftwareElement.fields}" var="item" style="margin-top: 30px;margin-bottom: 10px"
                  widgetVar="itemWidgetVar" styleClass="editableDataTable"  selection="#{classSoftwareElementController.selectedFieldSoftwareElements}" editMode="cell" editable="true"
                  paginator="false" paginatorAlwaysVisible="false" paginatorPosition="bottom" rowKey="#{item.hashCode()}" rows="10" rowsPerPageTemplate="10,20,30,40,50">
                    <p:ajax event="rowUnselectCheckbox" update="FieldSoftwareElement_listForm_btnsPanel"/>
                    <p:column selectionMode="multiple" style="width:16px;text-align:center"/>

       <p:column  headerText="#{bundle.FieldSoftwareElement_AccessFlag}">
          <p:cellEditor>
                   <f:facet name="output">
                      <p:outputLabel  value="#{item.accessFlag}"/>
                   </f:facet>
                   <f:facet name="input" id="cfh">
                      <p:autoComplete styleClass="search-box" title="Creator"
                                    id="ReferenceEventDialog_referenceEventForm_toCreatorIn" multiple="true"
                                    var="creator"                                   
                                    value="#{item.accessFlag}"
                                    completeMethod="#{sendLtrView.allowableActors}"
                                    converter="ActorRelationConverter" itemLabel="#{creator.title}"
                                    itemValue="#{creator}"
                                    disabled="#{tabParam.readOnly}" forceSelection="true">
                   </f:facet>
         </p:cellEditor>
       </p:column>
       <p:column headerText="#{bundle.FieldSoftwareElement_ColumnSize}">
           <p:cellEditor>
                  <f:facet name="output">
                     <p:outputLabel value="#{item.columnSize}"/>
                  </f:facet>
                  <f:facet name="input">
                    <p:inputNumber value="#{item.columnSize}" disabled="#{not classSoftwareElementController.selectedDynamic}"/>
                  </f:facet>
         </p:cellEditor>
     </p:column>                                             
     </p:dataTable>
1 Answers
Related