PrimeFaces 8中p:selectCheckboxMenu的filterMatchMode不生效问题求助

问题说明 #

使用PrimeFaces 8开发时，参照官方文档配置p:selectCheckboxMenu组件后，实际运行效果不符合预期，控制台无任何错误输出。

关联代码 #

前端XHTML代码 #

<div class="p-col-12">
    <p:outputLabel for="tripType" value="Testing new title"/>
    <p:selectCheckboxMenu id="tripType"
                          value="#{analyticsController.selectedNewTripType}"
                          label="Cities"
                          filter="true"
                          filterMatchMode="in"
                          panelStyle="width:250px">
        <f:selectItems value="#{analyticsController.newTripType}" />
    </p:selectCheckboxMenu>
</div>

后端控制器代码 #

private String[] selectedNewTripType;
private List<String> newTripType;

@PostConstruct
public void init() {
    newTripType = new ArrayList<String>();
    newTripType.add("Miami");
    newTripType.add("London");
    newTripType.add("Paris");
    newTripType.add("Istanbul");
    newTripType.add("Berlin");
    newTripType.add("Barcelona");
    newTripType.add("Rome");
    newTripType.add("Brasilia");
    newTripType.add("Amsterdam");
}

public String[] getSelectedNewTripType() {
    return selectedNewTripType;
}

public void setSelectedNewTripType(String[] selectedNewTripType) {
    this.selectedNewTripType = selectedNewTripType;
}

public List<String> getNewTripType() {
    return newTripType;
}

排查与解决方案 #

按以下顺序排查即可解决问题：

• 确认p:selectCheckboxMenu组件嵌套在<h:form>或<p:form>表单标签内，PrimeFaces所有交互输入组件必须依赖表单标签才能正常工作，缺失表单标签会出现无报错但功能异常的情况
• 给p:selectCheckboxMenu补充multiple="true"属性，明确指定组件为多选模式，避免部分版本默认配置不生效
• 检查项目是否正确引入PrimeFaces 8对应的主题CSS、核心JS资源，以及用到p-col类对应的PrimeFlex样式库，样式资源缺失会直接导致组件渲染变形
• 给<f:selectItems>补充明确的属性映射，避免自动解析异常，修改为以下写法即可：

  <f:selectItems value="#{analyticsController.newTripType}" var="city" itemLabel="#{city}" itemValue="#{city}" />
  

• 以上配置都确认无误后，清除浏览器缓存、重新编译项目后再测试，排除本地缓存旧资源导致的渲染异常。

内容的提问来源于stack exchange，提问作者Johan Smith