suggestionbox problem in Internet Explorer
I'm having a problem with a suggestionbox component having problems in Internet Explorer but working fine in Firefox. I'd appreciate any suggestions for possible issues that might cause the problem before I dive in and try to get a minimally reproducing example.
The problem: when the user starts typing, the suggestionBox appears, the user selects a row, the input text field fills in and the action happens (filling in other fields), then the suggestionBox doesn't disappear, it just hangs there and does nothing. I have other suggestion boxes in modal panels, if I bring them up they don't appear at all--the suggestionBox functionality doesn't work anymore.
On Firefox, this works as expected, no problems at all. The box disappears and the rest of the form functions as usual.
I did see another forum thread here where nested forms were the problem; that's not the issue here. There's a single form for the main page and each modalPanel has a separate form around a data table in the panel, and I've looked at the generated HTML and there's no nesting.
Here's the segment of code for the main suggestionBox:
<rich:suggestionbox
suggestionAction="#{geneSubmission.suggestLoci}"
var="l"
for="locus"
minChars="5"
eventsQueue="locusQueue"
ignoreDupResponses="true"
fetchValue="#{l.name}"
nothingLabel="No locus found"
width="100"
height="300">
<h:column>
<h:outputText value="#{l.name}" />
</h:column>
<a4j:support
event="onselect"
action="#{geneSubmission.setLocusSymbol}"
reRender="symbol, fullName">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
<f:setPropertyActionListener
value="#{l.name}"
target="#{gene.locus}" />
</a4j:support>
</rich:suggestionbox>
Here's the complete code for the form (not including the code for the modal panels which are outside this form), which includes the above component as the for="locus" component attached to the locus input text field:
<h:form>
<a4j:outputPanel id="submissionPanel">
<h:panelGrid
columns="2"
columnClasses="field,field">
<h:panelGrid columns="1">
<h:inputText
id="articleId"
required="true"
requiredMessage="Must enter article id"
value="#{geneSubmission.articleId}">
<a4j:support
event="onblur"
ajaxSingle="true"
reRender="articleMessage,submitButton">
<f:setPropertyActionListener
value="#{login.communityId}"
target="#{geneSubmission.communityId}" />
</a4j:support>
<h:outputLabel
for="articleId"
styleClass="fieldLabel">
<h:outputText value="*Article Id:" />
</h:outputLabel>
<rich:toolTip
mode="client"
value="Required: The DOI or PubMed id of the article from which you are annotating the genes."
styleClass="tooltip" />
</h:inputText>
<h:panelGroup id="articleMessage">
<h:message
for="articleId"
styleClass="errorMessage" />
</h:panelGroup>
</h:panelGrid>
<h:selectOneRadio
id="articleType"
value="#{geneSubmission.articleType}"
layout="pageDirection"
styleClass="radioLabel">
<f:selectItem
itemValue="doi"
itemLabel="Digital Object Identifier (DOI)" />
<f:selectItem
itemValue="pubmed"
itemLabel="Pubmed ID" />
</h:selectOneRadio>
</h:panelGrid>
<rich:dataTable
id="locusTable"
rows="0"
value="#{geneSubmission.genes}"
var="gene">
<rich:column>
<f:facet name="header">
<h:panelGrid
id="locusNameHeader"
rowClasses="headerLabel,exampleTableHeader,tooltip"
columns="1">
<h:outputText value="*Locus Name" />
<h:outputText value="AT2G23380" />
<rich:toolTip
mode="client"
value="Required: AGI locus name, the field will autocomplete the name after you type 5 characters" />
</h:panelGrid>
</f:facet>
<h:panelGrid
id="locusField"
columns="1"
rowClasses="field">
<h:inputText
id="locus"
value="#{gene.locus}"
required="true"
requiredMessage="Must enter locus name"
size="9">
<a4j:support
event="onblur"
ajaxSingle="true"
reRender="locusMessage,submitButton">
<f:setPropertyActionListener
value="#{login.communityId}"
target="#{geneSubmission.communityId}" />
</a4j:support>
</h:inputText>
<h:panelGroup id="locusMessage">
<h:message
for="locus"
styleClass="errorMessage" />
</h:panelGroup>
<rich:suggestionbox
suggestionAction="#{geneSubmission.suggestLoci}"
var="l"
for="locus"
minChars="5"
eventsQueue="locusQueue"
ignoreDupResponses="true"
fetchValue="#{l.name}"
nothingLabel="No locus found"
width="100"
height="300">
<h:column>
<h:outputText value="#{l.name}" />
</h:column>
<a4j:support
event="onselect"
action="#{geneSubmission.setLocusSymbol}"
reRender="symbol, fullName">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
<f:setPropertyActionListener
value="#{l.name}"
target="#{gene.locus}" />
</a4j:support>
</rich:suggestionbox>
</h:panelGrid>
</rich:column>
<rich:column>
<f:facet name="header">
<h:panelGrid
id="symbolHeader"
rowClasses="headerLabel,exampleTableHeader,tooltip"
columns="1">
<h:outputText value="Symbol" />
<h:outputText value="CLF" />
<rich:toolTip
mode="client"
value="Primary symbol for locus; enter new symbol if needed" />
</h:panelGrid>
</f:facet>
<h:panelGrid
id="symbolField"
columns="1"
rowClasses="field">
<h:inputText
value="#{gene.symbol}"
id="symbol"
size="5">
</h:inputText>
<rich:suggestionbox
suggestionAction="#{geneSubmission.suggestSymbols}"
var="s"
for="symbol"
minChars="2"
eventsQueue="symbolQueue"
ignoreDupResponses="true"
fetchValue="#{s.symbol}"
nothingLabel="No symbols found"
width="350"
height="300">
<h:column>
<f:facet name="header">Symbol</f:facet>
<h:outputText value="#{s.symbol}" />
</h:column>
<h:column>
<f:facet name="header">Full Name</f:facet>
<h:outputText value="#{s.fullName}" />
</h:column>
<a4j:support
event="onselect"
reRender="symbol, fullName">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
<f:setPropertyActionListener
value="#{s.fullName}"
target="#{gene.fullName}" />
</a4j:support>
</rich:suggestionbox>
<rich:message
for="symbol"
styleClass="errorMessage" />
</h:panelGrid>
</rich:column>
<rich:column>
<f:facet name="header">
<h:panelGrid
id="symbolFullNameHeader"
rowClasses="headerLabel,exampleTableHeader,tooltip"
columns="1">
<h:outputText value="Symbol Full Name" />
<h:outputText value="CURLY LEAF" />
<rich:toolTip
mode="client"
value="Full name of symbol; enter new full name if needed" />
</h:panelGrid>
</f:facet>
<h:panelGrid
id="fullNameField"
columns="1"
rowClasses="field">
<h:inputText
value="#{gene.fullName}"
id="fullName"
size="20"
maxlength="200">
</h:inputText>
<rich:message
for="fullName"
styleClass="errorMessage" />
</h:panelGrid>
</rich:column>
<rich:column>
<f:facet name="header">
<h:panelGrid
id="annotationsHeader"
rowClasses="headerLabel,exampleTableHeader,tooltip"
columns="1">
<h:outputText value="*Add Information" />
<h:outputText value="Click links below to add..." />
<rich:toolTip
mode="client"
value="Required: At least one annotation of this gene from the article" />
</h:panelGrid>
</f:facet>
<h:panelGrid
columns="1"
columnClasses="annotationLink">
<a4j:commandLink
value="Molecular Function#{gene.functionCount}"
id="functionLink"
onclick="#{rich:component('functionPanel')}.show()"
styleClass="annotationLink"
reRender="functionText, functionTable">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
</a4j:commandLink>
<a4j:commandLink
value="Biological Process#{gene.processCount}"
id="processLink"
onclick="#{rich:component('processPanel')}.show()"
styleClass="annotationLink"
reRender="processText, processTable">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
</a4j:commandLink>
<a4j:commandLink
value="Subcellular Localization#{gene.componentCount}"
id="componentLink"
onclick="#{rich:component('componentPanel')}.show()"
styleClass="annotationLink"
reRender="componentText, componentTable">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
</a4j:commandLink>
<a4j:commandLink
value="Expression#{gene.expressionCount}"
id="expressionLink"
onclick="#{rich:component('expressionPanel')}.show()"
styleClass="annotationLink"
reRender="expressionText, expressionTable">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
</a4j:commandLink>
<a4j:commandLink
value="Interacting Partner/s#{gene.locusCount}"
id="partnerLink"
onclick="#{rich:component('partnerPanel')}.show()"
styleClass="annotationLink"
reRender="partnerText, partnerTable">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
</a4j:commandLink>
<a4j:commandLink
value="Other#{gene.otherCount}"
id="otherLink"
onclick="#{rich:component('otherPanel')}.show()"
styleClass="annotationLink"
reRender="otherText, otherTable">
<f:setPropertyActionListener
value="#{gene}"
target="#{geneSubmission.selectedGene}" />
</a4j:commandLink>
</h:panelGrid>
</rich:column>
</rich:dataTable>
<h:panelGrid columns="3">
<a4j:commandButton
id="submitButton"
value="Save to Database"
disabled="#{!geneSubmission.valid}"
reRender="submissionPanel"
oncomplete="#{rich:component('savedPanel')}.show()"
action="#{geneSubmission.submitAnnotations}">
<a4j:support event="onclick">
<f:setPropertyActionListener
value="#{login.communityId}"
target="#{geneSubmission.communityId}" />
</a4j:support>
</a4j:commandButton>
<a4j:commandButton
value="Clear Form"
immediate="true"
ajaxSingle="true"
reRender="articleId, articleType, locusTable, submitButton, functionPanel, processPanel, componentPanel, expressionPanel, partnerPanel, otherPanel"
action="#{geneSubmission.cancelAnnotations}" />
<a4j:commandButton
value="Add Another Locus"
type="button"
immediate="true"
ajaxSingle="true"
action="#{geneSubmission.addLocus}"
reRender="locusTable,submitButton" />
</h:panelGrid>
</a4j:outputPanel>
</h:form>
