2 Replies Latest reply on Dec 13, 2012 3:00 AM by sandro.braendli

    Autocomplete Popup Keeps Being Shown When opened using Button

    mister_s
    mister_s Jul 25, 2012 2:51 PM

      I'm having an issue with a rich:autocomplete component that doesn't close when the user clicks elsewhere. In my case, this causes a rich:calendar component to be rendered "through" the autocomplete list:

       

      https://community.jboss.org/servlet/JiveServlet/download/750288-62853/ac-list-ie9.png

       

      This situation happens only

      * If the autocomplete is opened using its "button" (showButton="true")

      * in Internet Explorer (FF and Chrome are fine)

       

      To reproduce with the xhtml page shown below:

      # Click on the autocomplete's button

      #: the suggestion list is shown (empty in this test example)

      # Either

      ## Click on the Calendar component (the input box or the button) to get to the result shown in the image above

      ## Click (once) elsewhere on the screen - the suggestion list will still be shown. Curiously enough, the list vanishes if one clicks twice outside of the list.

       

      I've discovered this using RF 4.0, JBoss 6.0 and IE9, but also with more recent versions - RF 4.2.2, JBoss7.0 & IE9 this still occurs. Here's the Facelet as a minimal example of this:

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich">
<h:head>
    <style type="text/css">
                    .ac {
                        width: 400px !important;
                    }
                    .acPopup {
                        width: 400px !important;
                        height: 30px;
                        line-height: 30px;
                    }
          </style>
</h:head>
<h:body>
    <h:form id="mainForm">
        <rich:calendar
            id="testCalendar"
            popup="true" />

        <br />
        <br />

        <rich:autocomplete
            id="testAutocomplete"
            showButton="true"
            inputClass="ac" styleClass="ac" popupClass="acPopup"
            onclick="#{rich:component('mainForm:testAutocomplete')}.showPopup();"
            >
        </rich:autocomplete>
    </h:form>
</h:body>
</html>

       

      The "onclick" attribute could be omitted, but it can be used to show that the suggestion list closes as expected when it's opened by clicking into the input field (as opposed to using the button). Same with the CSS definitions: they only serve to widen the input field, so that the overlapping calendar is better visible.

       

      Did anyone ran into something similar? Is is a bug in RichFaces?

      Also: does anyone know a possible workaround? I've tried using "blur" and "focusout" events to programatically close the popup, but didn't succeed. A workaround for my situation (tailored to the overlapping calendar) is hiding the suggestion list in the calendar's "onshow" event - but of course this isn't a general solution.

       

      Any ideas?