Primefaces p:autocomplete dropdown does not go outside p:dialog

Question

I have a problem with the Primefaces 5.2 p:autocomplete inside p:dialog . The thing is when a user is typing text inside the box, a dropdown shows up inside the dialog within the scroll (see the picture), but I want to dropdown displayed outside the dialog.

Since the dialog is located above another dialog, I had to use appendTo="@this" . This is my code:

<p:dialog id="someid" widgetVar="someid-dialog" modal="true">
    <h:form id="someid-form">
        <p:panelGrid columns="2">
            <h:outputText value="Name"/>
                <p:autoComplete appendTo="@this" id="someid-auto" var="pr"
                                value="#{someBean.product}" itemValue="#{pr}" 
                                itemLabel="#{pr.name}#" label="Product"                                      
                                completeMethod="#{someBean.filteredProducts}"
                                converter="productConverter">                            
                </p:autoComplete>
    </h:form>
</p:dialog>

Since the problem is obvious on the client side, I didn't paste my backend code. Putting the form outside the dialog not helped. I had the same problem with p:selectOneMenu . I hope somebody has a solution.

Answer 1

Remove appendTo="@this" property. you don't want to append the drop down to the dialog.