I am trying to create a tree on a modal panel where each node of a tree will have an inputText supported by a suggestionBox and some other controls. Currently, I am trying to implement just the inputText with the suggestionBox. The suggestionBox pops up at the absolute (0,0) location and not under the inputText. If I reopen the modal panel, the suggestionBox opens in the correct location. I went through the suggestionbox.js and found that the offsetParent is null when the popup is at 0,0. Here is the snippet that I am using.
<rich:modalPanel id="_mpnl" resizeable="false" width="600" height="300">
<f:facet name="header">
<h:outputText id="_mpnlTitle" value="#{bean.title}" />
</f:facet>
<f:facet name="controls">
<h:form id="_hideMpnl">
<a4j:commandLink id="_lnkDone" value="Done" onclick="Richfaces.hideModalPanel('_mpnl')"/>
</h:form>
</f:facet>
<a4j:form id="_form">
<a4j:outputPanel id="_mpnlWrapper" layout="block" style="width:600px;height:250px;overflow:auto;clear:both;position:relative;">
<rich:tree switchType="ajax">
<rich:recursiveTreeNodesAdaptor roots="#{bean.roots}" var="item" nodes="#{item.subGroups}">
<rich:treeNode>
<t:inputText id="input" value="#{item.val}"/>
<rich:suggestionbox id="_suggestMatchingFields"
width="200"
height="100"
for="input"
nothingLabel="No Fields Found"
cellpadding="0"
cellspacing="0"
minChars="3"
suggestionAction="#{bean.findMatchingFields}"
var="fieldName">
<a4j:ajaxListener type="org.ajax4jsf.ajax.ForceRender"/>
<h:column>
<h:outputText value="#{fieldName}"/>
</h:column>
<a4j:support event="onselect" action="">
<t:updateActionListener value="#{fieldName}" property="#{item.val}"/>
</a4j:support>
</rich:suggestionbox>
</rich:treeNode>
</rich:recursiveTreeNodesAdaptor>
</rich:tree>
</a4j:outputPanel>
</a4j:form>
</rich:modalPanel>
I will greatly appreciate any help with this.
More info: I am using richfaces 3.1.3 GA
I would appreciate any hypothesis that you have.