Question

我对elem <p :selectOneMenu>有一个焦点问题。

我使用<p:focus>专注于失败的验证字段。这是我的xhtml代码的一部分：

<h:form>
    <p:focus/>

    [Some other panel and inputText]

                <p:selectOneMenu id="workCategory"
                                 value="#{personDto.category}"
                                 filter="true" filterMatchMode="contains"
                                 required="true" style="min-width: 0px !important;">
                    <f:selectItem itemValue="#{null}"
                                  itemLabel="please select something"
                                  noSelectionOption="true" itemDisabled="true"/>
                    <f:selectItems value="#{clientController.categoryList}"
                                   var="category" itemValue="#{category}"
                                   itemLabel="#{category.label}}"/>
                    <p:ajax event="change"
                            listener="#{clientController.doSomeJob(personDto.category)}"
                            partialSubmit="true" process="@this, @(.csrf)"
                            />
                </p:selectOneMenu>
                <p:message for="workCategory" display="text"/>

</h:form>

当验证失败时，焦点将放在验证失败的第一个元素上，这意味着页面会滚动到此元素。这适用于我的页面的其他元素，例如inputText，switchButton ......但它似乎不适用于<p:selectOneMenu>，因为当它是第一个验证失败的元素时，页面不会滚动直到它的位置。

我检查了<p:selectOneMenu>在触发焦点事件时收到类“ui-state-focus”。尽管验证失败时“ui-state-focus”，但它不会按预期滚动。我尝试将<p:selectOneMenu>替换为<h:selectOneMenu>。它适用于<h:selectOneMenu>，但不适用于<p:selectOneMenu>。

为什么会这样，我该如何解决这个问题？我需要因为我不能轻易改变<h:selectOneMenu>，因为整个应用程序可能会受到影响。

使用p：focus和p：selectOneMenu自动滚动到JSF验证错误

0 个答案: