rich:autocomplete popup selection box freezing

[wrdlprmpft]

Dear Richfaces Community

I have a very critical problem with rich:autocomplete. I am not sure, whether this is a similar issue as described herein. I tried the work around described, but it is not working for me.

I have a component with four autocomplete fields, accompanying clear buttons and labels. Currently I test with following options: autofill="false", showButton="true", mode="cachedAjax". As a workaround for issue RF-12152 I use a javascript filling an empty space onfocus (onfocus="#{rich:component('region')}.setValue(' ');"). The backing bean logic is, that the autocomplete method takes into account all input also from the other fields to filter the selction shown in the popup drop down menu.

Now if I try to use it, I can make a selection in the first box. When I get to the second box I observe two kinds of misbehaviours:

1.) Mostly the popup completely freezes. The select highlighting is not shown at all or it is frozen to one item, it is not possible to select an item and the popup does not close any more. If you point to an item you can get the text marked, which is not the normal behaviour. Nothing is selected, the popup does not close. You see this in the following screenshot:

Partly this issue seems to be due to a great delay in rendering. In some cases the select highlighting comes back and I can select then an item. In  these cases it  mostly happens, that the popup with the selected item freezes again as shown below:

As browser I am using Firefox 21.0.

The number of items to be displayed in the first example (Bayern) is seven. In the second example (Baden-Württemberg) it is four. There seems indication, that the small difference in these small number of items causes great differences in the delay. It is more likely to get it finally free for item slection in the second case with only four items. I never experineced such problem with the same application logic in Richfaces 3 components suggestionbox or combobox.

Is this a known issue. Any recommendations for work arounds?

Kind regards and thanks in advance

Chris

Below is the full xhtml code:

[wrdlprmpft]

Sorry I forgot the xhtml in the previous post. Here is it:

<ui:component xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:s="http://jboss.com/products/seam/taglib">
 
    <rich:panel>
        <f:facet name="header">Location: Select from EUROSTAT NUTS/LAU units</f:facet>
        <h:form id="Location">
            <h:panelGrid columns="3"
                rendered="#{(rendered!=null) ? rendered : true}">
                <h:commandButton value="clear"
                    action="#{locationBacking.clearRegion}"
                    disabled="#{locationBacking.disabled}"
                    reRender="#{locationBacking.renderForms}" />
                <rich:autocomplete id="region" mode="cachedAjax" autofill="false"
                    showButton="true"
                    autocompleteMethod="#{locationBacking.getRegions}"
                    value="#{locationBacking.region}"
                    onfocus="#{rich:component('region')}.setValue(' ');">
                    <a4j:ajax event="blur" render="#{locationBacking.renderForms}" />
                </rich:autocomplete>
                <h:outputLabel value="region" for="region" />
                <h:commandButton value="clear"
                    action="#{locationBacking.clearProvince}"
                    disabled="#{locationBacking.disabled}"
                    reRender="#{locationBacking.renderForms}" />
                <rich:autocomplete id="province" mode="cachedAjax" autofill="false"
                    showButton="true" var="suggestion"
                    autocompleteMethod="#{locationBacking.getProvinces}"
                    value="#{locationBacking.province}"
                    onfocus="#{rich:component('province')}.setValue(' ');">
                    <a4j:ajax event="blur" render="#{locationBacking.renderForms}" />
                </rich:autocomplete>
                <h:outputLabel value="province" for="province" />
                <h:commandButton value="clear"
                    action="#{locationBacking.clearDistrict}"
                    disabled="#{locationBacking.disabled}"
                    reRender="#{locationBacking.renderForms}" />
                <rich:autocomplete id="district" mode="cachedAjax" autofill="false"
                    showButton="true" var="suggestion"
                    autocompleteMethod="#{locationBacking.getDistricts}"
                    value="#{locationBacking.district}"
                    onfocus="#{rich:component('district')}.setValue(' ');">
                    <a4j:ajax event="blur" render="#{locationBacking.renderForms}" />
                </rich:autocomplete>
                <h:outputLabel value="district" for="district" />
                <h:commandButton value="clear"
                    action="#{locationBacking.clearLocationName}"
                    disabled="#{locationBacking.disabled}"
                    reRender="#{locationBacking.renderForms}" />
                <rich:autocomplete id="locationName" mode="cachedAjax"
                    autofill="false" showButton="true"
                    autocompleteMethod="#{locationBacking.getLocationNames}"
                    onfocus="#{rich:component('district')}.setValue(' ');"
                    onkeydown="if (#{rich:component('locationNames')}.getValue() == ' ') #{rich:component('locationNames')}.setValue('');"
                    <a4j:ajax event="blur" render="#{locationBacking.renderForms}" />
                </rich:autocomplete>
                <h:outputLabel value="locationName" for="locationName" />
            </h:panelGrid>
        </h:form>
    </rich:panel>
    <h:outputScript target="body">
 jQuery(document).ready(function () {
          jQuery('.rf-au-fld-btn').click(function(e) {
                    jQuery(e.target).focus();
          }); 
});
 </h:outputScript>
</ui:component>

[wrdlprmpft]

This was because of rendering conflicts. The issue occurred, when I clicked to the drop down button directly when leaving the previous autocomplete. Obviously actions triggered with onblur conflicted with onfocus in the next field. When I left the first field without triggering the next one onblur completed and then I could work with the other field normally.

Thus I had to provide programmatically for an earlier triggering of the onblur actions by adding a rerender already on the selectitem event:

Find below the corrected code for one autocomplete:

            <rich:autocomplete id="region" autofill="false" showButton="true"
                    mode="cachedAjax"
                    autocompleteMethod="#{locationBacking.getRegions}"
                    value="#{locationBacking.region}"
                    onfocus="#{rich:component('region')}.setValue(' ');" >
                    <a4j:ajax event="selectitem" render="#{locationBacking.renderForms}" />
                    <a4j:ajax event="blur" render="#{locationBacking.renderForms}" />
                </rich:autocomplete>

Also the onblur event has to stay in case a new item is entered, which is not in the list. The rerender then is necessary to submit it to the bean.

Of course the best solution would be to make the autocomplete button functional by resolving issue RF-12152, so that the ugly work around onfocus could be avioded.