当自动完成位于可编辑的 DataTable 中时，Tab 键不起作用

Question

我在 p:dataTable 和 p:cellEditors 中有一个 p:autoComplete。当我按下 Tab 键时，光标在行元素之间按顺序正确移动，例如在 inputs 和 selectOneMenus 之间（AutoComplete 除外），光标进入 AutoComplete 但无法退出。

我知道如果我在 p:autoComplete 中删除 var 它工作正常，我认为 var 生成一个隐藏的输入破坏了 tabindex，但我不能用 tabindex 和其他方式。

     <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>

Answer 1

请看这张票：https://github.com/primefaces/primefaces/issues/3314

它将在 7.1 中修复。如果您在自动完成上设置 autoSelection="false"，则 TAB 键将正常工作，而不是 select 项目。

当自动完成位于可编辑的 DataTable 中时，Tab 键不起作用

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

datatable

autocomplete

primefaces