Issue with large suggestion boxes in IE on input fields having an "onchange" AJAX action

[martin.koster]

Hi,

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>

[ilya_shaikovsky]

the problem looks very similar to https://jira.jboss.org/browse/RF-7527

And actually - not a problem of suggestion box. Y ou just need to avoid the reREndering of  the elements which actually has some components attched to them by JS. In other case them getting messed as just loosing the original DOM element to which them was attached. You seems also need some workaround which will allow not to send request when SB list actieve or at least to avoid input reRendering(maybe use some JS manipulations in oncomplete instead)

[martin.koster]

Thanks for your quick answer. Yes, the problem indeed seems to be related to the issue described in https://jira.jboss.org/browse/RF-7527.

However, my problem is that I want to use the "onchange" event on the input field. Unfortunately, when I intercept the AJAX request on the "onchange" event (e.g. when the suggestion box is visible), the event won't fire a second time, in case I close the suggestion box without having selected a value or when selecting the same value from the suggestion box that is already entered.

1.) Is this somehow possible anyway? Using scrollbars of the suggestion box and AJAX request triggered on an "onchange" event in IE?

2.) Is there a JavaScript routine that can check, if the suggestion box is visible? I couldn't find anything in the documentation on this.

Thanks for any help.

[martin.koster]

Ok, for point 2.) I found that suggestion box has the property "active".

So currently, I intercept the a4j:support (attached to the "onchange" event of the field) in "onsubmit" and I am checking, if the suggestion box is active. If the suggestion box is active, I don't fire the validation AJAX request.

However, the request isn't fired a second time, when the suggestion box is hidden and the value hasn't changed. Unfortunately, I can not use "onblur".

Does anyone has experience with what I want to achieve with 1.) ? Best practices?

(BTW: FireFox does not seem to fire the "onchange" event when using the scrollbars...only IE)