Issue with large suggestion boxes in IE on input fields having an "onchange" AJAX action
martin.koster Jul 23, 2010 3:18 AMHi,
I am currently facing a weird behaviour with large suggestion boxes in the Internet Explorer.
I have an input field with an a4j:support reacting "onchange" (for performing field-wise validation). Additionally, I connected a suggestion box to this field. The results shown in the suggestion box can be quite large, so there are scroll bars in the suggestion box.
The problem now arises, when I try to use the scroll bar. What happens is the following:
1. Enter a value in the input field
2. Suggestion box including scroll bars is displayed
3. Scrolling through the result list with the vertical or horizontal scrollbars
4. Suggestion box is still displayed, but IE now fires the "onchange" (FireFox doesn't).
5. AJAX request returns, the field is re-rendered, the suggestion box disappears (or at least is not displayed anymore)
Problem is:
1. The suggestion box disappears.
2. The dialogue is now in a real strange state. Some input fields can not be clicked with the mouse anymore (seems that the "ghost" suggestion box is blocking those fields).
3. Furthermore, the "onkeydown" event handler of the "body" tag is not invoked anymore. In our case, we are intercepting the "backspace" button, so that the browser's "Back" button is not activated, i.e. that the user is not led back to the previous page. This functionality does not work anymore in this state.
Desired behaviour would be:
The suggestion box does not disappear, use the scroll bars and no "change" event is fired. Only after "really" leaving the field via tab or clicking in another field triggers the "onchange" (btw. same problem with "onblur")
Does anyone have an idea, how to get rid of this problem and how I can use large suggestion boxes together with a4j:support "onchange" for field-wise validation?
I saw a similar post where it was proposed to check, if the suggestion box is visible. But that doesn't help in my case, because the "onchange" and the validation is not fired a second time, after the first one is "intercepted" in "onsubmit".
Here is the code snippet:
<a4j:outputPanel id="inputFieldPanel">
<h:inputText value="#{form.value}" id="inputField" size="4">
<rich:toolTip styleClass="error-tool-tip" rendered="false" for="inputField">
<rich:message for="inputField" />
</rich:toolTip>
<!-- For field-wise validation (and for filling the field value, if search result is unique) -->
<a4j:support id="inputFieldChangeEvent" event="onchange"
actionListener="#{controller.processAutofillAndValidate}"
reRender="inputFieldPanel"
ajaxSingle="true" process="inputField">
</a4j:support>
</h:inputText>
<!-- Large suggestion box with scroll bars -->
<a4j:region id="inputFieldRegion">
<rich:suggestionbox height="400" width="650" id="inputFieldSuggest"
suggestionAction="#{controller.suggestAction}" var="object" fetchValue="#{object.fieldValue}"
minChars="2" rules="THEAD" for="inputField" ajaxSingle="true"
immediate="true" ignoreDupResponses="true" process="inputField">
.. columns here ..
<a4j:support event="onselect"
reRender="inputFieldPanel">
<f:setPropertyActionListener value="#{object}" target="#{form.selectedObject}"/>
</a4j:support>
</rich:suggestionbox>
</a4j:region>