Search code examples
ajaxjsfprimefacesjsf-2.2composite-component

Composite component is rendered twice after ajax call

I have a strange situation with a composite component. I'm using it all over my web application but now I noticed that if I update a form containing my composite component, the component get's rendered twice (at times).

My component (let's say it's called datecc) is defined as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
    <h:body>
        <composite:interface>
            <composite:attribute name="value"/>
            <composite:attribute name="shortFormat"/>
            <composite:attribute name="style"/>
            <composite:attribute name="styleClass"/>
            <composite:attribute default="false" name="inputLabel"/>
        </composite:interface>
        <composite:implementation>
            <span id="#{cc.clientId}">
                <h:outputText rendered="#{not cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
                    <f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
                </h:outputText>
                <span>asdasdfasdf</span>
                <h:inputText disabled="true" rendered="#{cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
                    <f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
                </h:inputText>
            </span>
        </composite:implementation>
    </h:body>
</html>

The page I'm calling it from is something similar to this:

<h:form id="form">
    <p:dataTable id="rowsTable" value="#{myBean.rows}" var="it" 
            selectionMode="single" selection="#{myBean.selectedRow}" rowKey="#{it.key}"
            rowStyleClass="#{myBean.isRed(it) ? 'red' : null}">
        <p:ajax event="rowSelect" update=":menuForm :detailForm :contextualMenu"/>
        <column>....</column>
        <column><mycc:datecc value="#{it.date}" inputLabel="true" /></column>
    </p:dataTable>
</h:form>

<h:form id="detailForm>
    <!-- this field is rendered twice once I select a row in the above table -->
    <mycc:datecc value="#{myBean.selectedRow.date}" inputLabel="true" />
</h:form>

I'm unfortunatelly doing some work on the setSelectedRow method in my bean @Named @ConversationScoped public class MyBean { ... } however I don't think that's causing the problem.

Solution

  • I solved my problem by implementing the following class.

    package com.company.faces.cc;

import javax.faces.component.FacesComponent;
import javax.faces.component.NamingContainer;
import javax.faces.component.UIInput;
import javax.faces.component.UINamingContainer;

@FacesComponent("inputDate")
public class Date extends UIInput implements NamingContainer {
    @Override
    public String getFamily() {
        return UINamingContainer.COMPONENT_FAMILY;
    }
}

    Although I don't really know why this solves the issue since it doesn't add much to the component.