Binding values to UIInput in composite component results in null - jsf

Question

I am trying to create a composite component for a user search. Here is the component xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html">
<cc:interface componentType="searchUser">
<!-- Define component attributes here -->
<cc:attribute name="value" type="java.lang.Object"
shortDescription="Selected User"/>
</cc:interface>
<cc:implementation>
<p:commandButton onclick="PF('sdgl').show();" type="button" value="search for user"/>
<p:dialog header="Search for User"
widgetVar="sdgl"
modal="true"
width="80%"
appendTo="#(body)"
>
<h:form id="searchDLGForm" >
<p:fragment autoUpdate="true">
<p:panelGrid columns="2" id="searchPanel">
<p:outputLabel value="Username: "
for="username"
/>
<p:inputText id="username" binding="#{cc.login}"/>
<p:outputLabel value="First Name: "
for="firstname"
/>
<p:inputText id="firstname" binding="#{cc.firstname}"/>
<p:outputLabel value="Last Name: "
for="lastname"
/>
<p:inputText id="lastname" binding="#{cc.lastname}"/>
<p:commandButton value="search" actionListener="#{cc.search}"/>
</p:panelGrid>
<p:dataTable value="#{cc.foundUser}" var="user" id="sdgl_res" selection="#{cc.selectedUser}"
rowKey="#{user.id}">
<p:column selectionMode="single"
style="width:16px;text-align:center"/>
<p:column headerText="First Name">
#{user.firstName}
</p:column>
<p:column headerText="Last Name">
#{user.lastName}
</p:column>
<p:column headerText="E-Mail">
#{user.email}
</p:column>
</p:dataTable>
</p:fragment>
</h:form>
</p:dialog>
</cc:implementation>
The compnent is nesten in:
<h:form id="ouMembers">
<div>
<p:panelGrid>
......
<my:searchUser id="searchDLG" value="#{ouBean.userToAdd}"/>
</p:panelGrid>
</div>
</h:form>
And the corresponding Java:
private UIInput firstname;
private UIInput lastname;
private UIInput login;
private UserModel selectedUser;
private List<UserModel> foundUser;
/**
* Returns the component family of {#link UINamingContainer}.
* (that's just required by composite component)
*/
#Override
public String getFamily() {
return UINamingContainer.COMPONENT_FAMILY;
}
/**
* return selected user
*
* #return selected user
*/
#Override
public Object getSubmittedValue() {
return selectedUser;
}
public void search(ActionEvent event) {
System.out.println("searchUser called with: " + this.login.getSubmittedValue()+ ", " +
""+this.firstname.getSubmittedValue()+"," +
""+this.lastname.getSubmittedValue());
this.foundUser = UserModel.searchUser((String)this.login.getSubmittedValue(),
(String)this.firstname.getSubmittedValue(),
(String)this.lastname.getSubmittedValue());
}
#Override
public void encodeBegin(FacesContext context) throws IOException {
UserModel value = (UserModel) getValue();
if(value!=null){
firstname.setValue(value.getFirstName());
lastname.setValue(value.getLastName());
login.setValue(value.getLogin());
}else{
firstname.setValue("");
lastname.setValue("");
login.setValue("");
}
}
+ getters setters
The problem I currently have, is that this.login.getSubmittedValue(), this.firstname.getSubmittedValue() and this.lastname.getSubmittedValue() are null in the search method. I have tried using getValue() but that also resulted in null value.
I am following http://balusc.omnifaces.org/2013/01/composite-component-with-multiple-input.html tutorial for this. Any help is greatly appreciated. thanks.
I am using:
com.sun.faces 2.2.12
primefaces 5.2
on Glassfish 4.1.0
EDIT
After removing the <h:form id="searchDLGForm" > and the appendTo="#(body)" from the dialog, it works. however I have to remove the modal="true" parameter, or the dialog is also inactive.