Comportamento esquisito do SuggestionBox

Oi pessoal.
Eu to fazendo uma aplicação simples, com JSF, Facelets, Richfaces e me deparei com um comportamento muito esquisito do suggestionBox nessa situação:

eu tenho um arquivo tab.xhtml que contém um tabPanel

[code]<ui:composition 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="/template.xhtml">

    <ui:define name="body">
        <div align="center">
            <rich:tabPanel width="100%" headerAlignment="center" id="tabs" switchType="client" binding="#{controller.tabPanel}" selectedTab="#{controller.selectedTab}">
                <rich:tab id="tabForm" label="Formulário">
                    <a4j:include  viewId="form/list.xhtml" />
                </rich:tab>
                <rich:tab id="tabItem" label="Item">
                    ITEM
                </rich:tab>
                <rich:tab id="tabDelivery" label="Entrega">
                  Entrega
                </rich:tab>
                <rich:tab id="tabConfig" label="Configuração" disabled="true">
                    Configuração1
                </rich:tab>
                <rich:tab id="tabLayout" label="Configuração 2t" disabled="true">
                    Configuração2
                </rich:tab>
                <rich:tab id="tabView" label="Configuração3" disabled="true">
                    Configuração3
                </rich:tab>
            </rich:tabPanel>
        </div>
    </ui:define>
</ui:composition>

[/code]
nesse arquivo eu tenho um include na primeira aba (form/list.xhtml) e nele eu tenho esse código

[code] <ui:composition xmlns=“http://www.w3.org/1999/xhtml
xmlns:ui=“http://java.sun.com/jsf/facelets
xmlns:h=“http://java.sun.com/jsf/html
xmlns:f=“http://java.sun.com/jsf/core
xmlns:a4j=“http://richfaces.org/a4j
xmlns:rich=“http://richfaces.org/rich”>

<a4j:form reRender="formTable, sc1, sc2">
    <div align="center">
        <rich:panel>
            <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
            <h:outputText escape="true" value="Formularios"/>
            <br/>
            <h:outputText escape="false"/>
            <h:inputText id="formName" value="#{form_controller.formName}" title="Título" valueChangeListener="#{form_controller.carregarSuggestionBox}" width="550"/>
            <rich:suggestionbox id="suggestionBoxFormName" for="formName" suggestionAction="#{form_controller.complemento}"  width="250" height="180" var="result">
                <h:column>
                    <h:outputText value="#{result}"/>
                </h:column>
            </rich:suggestionbox>
            <a4j:commandButton action="#{form_controller.buscar}" value="Buscar">
                <f:param id="cmdButton" name="cmdButton"/>
                <a4j:support event="onclick" reRender="formTable,numForm,sc1,sc2" />
            </a4j:commandButton>
            <h:outputText escape="false"/>
            <h:outputText escape="false" value="Não há formulários cadastrados" rendered="#{form_controller.formCount == 0}" />
            <br/>
            <a4j:outputPanel ajaxRendered="true">
                <h:outputText value="Total de formulários listados: #{form_controller.formCount}" id="numForm"/>
            </a4j:outputPanel>
            <rich:spacer height="30" />
            <a4j:outputPanel id="outputPanel_sc1">
                <rich:datascroller  align="center" for="formTable" maxPages="20" reRender="sc2" id="sc1"/>
            </a4j:outputPanel>
            <rich:spacer height="30" />
            <a4j:outputPanel ajaxRendered="true">
                <rich:dataTable id='formTable' value='#{form_controller.forms}' var='formList' border="0" cellpadding="2" cellspacing="0" rows ="20" rendered="#{form_controller.formCount > 0}">
                    <f:facet name="header">
                        <h:outputText value="Formulários cadastrados" />
                    </f:facet>
                    <rich:column width="300">
                        <f:facet name="header">
                            <h:outputText value="Título" />
                        </f:facet>
                        <h:outputText value="#{formList.formName}" />
                    </rich:column>
                    <rich:column width="90">
                        <f:facet name="header">
                            <h:outputText value="Tipo" />
                        </f:facet>
                        <h:outputText rendered="#{formList.numType == 1}" value="Tipo 1"/>
                        <h:outputText rendered="#{formList.numType == 2}" value="Tipo 2"/>
                        <h:outputText rendered="#{formList.numType == 3}" value="Tipo 3"/>
                        <h:outputText rendered="#{formList.numType == 4}" value="Tipo 4"/>
                    </rich:column>
                    <rich:column width="70">
                        <f:facet name="header">
                            <h:outputText value="Situação" />
                        </f:facet>
                        <h:outputText rendered="#{formList.numStatus == 1}" value="status 1"/>
                        <h:outputText rendered="#{formList.numStatus == 2}" value="status 1"/>
                        <h:outputText rendered="#{formList.numStatus == 3}" value="status 1"/>
                    </rich:column>
                    <rich:column width="100">
                        <f:facet name="header">
                            <h:outputText value="Data de Atualização" />
                        </f:facet>
                        <h:outputText value="#{formList.lastAtualization}">
                            <f:convertDateTime type="TIMESTAMP" pattern="dd/MM/yyyy HH:mm:ss" />
                        </h:outputText>
                    </rich:column>
                </rich:dataTable>
            </a4j:outputPanel>
            <rich:spacer height="30" />
            <a4j:outputPanel id="outputPanel_sc2">
                <rich:datascroller align="center" for="formTable" maxPages="20" id="sc2" reRender="sc1" />
            </a4j:outputPanel>
        </rich:panel>
    </div>
</a4j:form>

</ui:composition>

[/code]

o problema é quando eu vou acessar o suggestionbox dentro desse aquivo acima, quando carregado via include no arquivo tab.xhtml.
o resultado do suggestionbox fica todo desconfigurado, aparecendo no canto da página (caso do chrome), ou aparecendo uma lista fixa logo abaixo do campo de texto e mostrando um erro de javascript (caso ie) e não dando para selecionar nenhum dos resultados vindos do suggestionbox.
E o mais esquisito é que, quando eu abro o arquivo user/form/list.xhtml direto no browser, ou mesmo quando copio o código dessa pagina e coloco dentro da aba no tab.xhtml, ele funciona normal!
Eu infelizmente estou usando essa última forma para utilizar o cóodigo sem erros, mas queria deixar o arquivo via include, pois seria o mais certo a fazer.
Alguém sabe o que pode estar acontecendo?

valeu!

Olá,

vc conseguiu resolver esse problema? Estou com o mesmo problema aqui. Quando coloco a SB dentro de um a4j:outputPanel ajaxRendered=true ela fica toda desconfigurada como falastes. Estou procurando no google e não achei nada ainda pra arrumar isso.

Então giulianocosta, pelo pelos testes que fiz, cheguei a conclusão de que não rola deixar o SuggestionBox dentro de um a4j:outputPanel ajaxRendered=true. Só que ainda não encontrei uma explicação para isso.
Tenta montar sua página de view de uma forma que o SuggestionBox fique fora desse a4j:outputPanel ajaxRendered=true. É a forma que eu fiz na minha aplicação e que funcionou.

Falow!

Pois é, até agora foi o único jeito que eu consegui para fazê-la funcionar. Estranho esse comportamento.

Então, tive o seguinte problema com o rich:suggestionBox:
A lista não aparecia embaixo do h:inputText, ela aparecia no canto superior esquerdo da página.
Estou utilizando Facelets e tenho um xhtml onde defino meu conteúdo, neste xhtml tem um a4j:outputPanel onde chamo outro xhtml.
A solução foi colocar o rich:suggestionBox dentro da tag:&lt;a4j:region renderRegionOnly="true"&gt;
Assim como mostra neste link http://www.ibm.com/developerworks/library/j-richfaces/
:wink:

bbmany
Esta solução resolveu meu problema.
Obrigado

Pessoal, estou com o mesmo problema, mas não consegui resolver.

Segue o trecho de código:


			<h:panelGroup>
				<h:inputText id="area2" value="#{article.selectedArea}" />
				<a4j:region renderRegionOnly="true">
					<rich:suggestionbox for="area2" var="area" minChars="2" suggestionAction="#{article.areasSuggestion}">
						<h:column>
							<h:commandLink value="#{area.descricao}">
							</h:commandLink>
						</h:column>
					</rich:suggestionbox>
				</a4j:region>
				<a4j:commandButton id="searchAreaButton" value="Procurar" 
					reRender="searchAreaPanel" action="#{article.fillAllAreas}"
					onclick="javascript:Richfaces.showModalPanel('searchArea')" />
			</h:panelGroup>
	public List<Area> areasSuggestion(Object value) {
		JPASession session = JPASessionFactory.createSession("sober");
		List<Area> allAreas = session.query("SELECT a FROM Area a WHERE lower(a.descricao) LIKE ?", "%" + value.toString() + "%");
		return allAreas;
	}

Alguém poderia me ajudar?