5 Replies Latest reply on Nov 19, 2012 10:03 AM by krzysztof.tomaszewski

    Drop down in AutoComplete does not disappear

    horowitzathome

      The drop down containing the suggestions does not disappear, if for example a command button is clicked instead of one of the suggested items of the drop down. After that they are visible in the browser window until the reload icon of the browser is clicked.

       

      Here a simple scenario:

      1. I enter ab and get the two suggestions abc and abd.
      2. But then, instead of clicking or selecting abc or abd, I click the Clear button.

       

      Screenshot at 2012-01-05 10_34_37.png

      The action of the bean is called, the AutoComplete entry field is cleared, but the two items of the drop down box remain in the browser window.

       

      Screenshot at 2012-01-05 10_35_47.png

       

      Here is the sample to reproduce:

       

      File TestAutoComp.xhtml

       

       

      // TestAutoCompBean.java

       

      import java.util.ArrayList;

      import java.util.List;

       

      import javax.faces.bean.ManagedBean;

      import javax.faces.bean.SessionScoped;

       

      @ManagedBean(name = "tacBean")

      @SessionScoped

      public class TestAutoCompBean extends BaseBean {

       

        private List<String> nameList;

        private String name;

       

        public TestAutoCompBean() {

          nameList = new ArrayList<String>();

          nameList.add("abc");

          nameList.add("abd");

        }

       

        public List<String> acName(String suggest) {

          return nameList;

        }

        

        public String clearAction() {

          setName(null);

          return null;

        }

        

        public String getName() {

          return name;

        }

        

        public void setName(String name) {

          this.name = name;

        } 

      }

       

       

      I tested it with 4.1.0.Final. Same effect also with elder versions.

      Does someone have any ideas what can be wrong?

      Best Regards,

      Georg

       

      <?xml version="1.0" encoding="UTF-8" ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich">
       
      <f:view>
        <h:head>
        </h:head>
        <h:body>
       
          <rich:panel id="acTestPanel">
           <h:form>
             <rich:autocomplete value="#{tacBean.name}" var="val"
               fetchValue="#{val}" autocompleteMethod="#{tacBean.acName}"
               autofill="false" mode="ajax" minChars="0">
               <h:outputText value="#{val}" />
             </rich:autocomplete>
       
             <a4j:commandButton value="Clear" title="Clear"         
               action="#{tacBean.clearAction}"
               render="acTestPanel" />
           </h:form>
          </rich:panel>
       
        </h:body>
      </f:view>
      </html>
      
      
        • 1. Re: Drop down in AutoComplete does not disappear
          saini.sushant

          Hi...I had same issue in my application sime time ago and from what I remember it was due to styling of some component and nothing to do with Richfaces. i would suggest trying to play with the style specially z-index of this component as well as some of the other components. I would try to remove all the other components from the page except this drop down first if the problem still remains you know it is the component itself and adjust its styling but if the problem goes away then you need to find out which component on the page is culprit.

          • 2. Re: Drop down in AutoComplete does not disappear
            saini.sushant
            • 3. Re: Drop down in AutoComplete does not disappear
              horowitzathome

              Hello,

               

              I am pretty sure that it is a problem of the autocomplete component. As in my sample, I have only three components, the panel, the autocomplete and the command button. The problem finally results from the drop down of the autocomplete component.

               

              I made a few modifications to make the problem more clear. The changes are:

               

              I added a boolean variable autoOn in the bean which is initially true.

              I added rendered="#{tacBean.autoOn}" for the autocomplete component.

              I added an outputText component which is rendered if autoOn is false (i.e. either the autocomplete or the outputText are rendered.

               

              Now the scenario:

               

              Initially the autocomplete component is shown and not the outputText.

              I enter the letter a.

              Autocomplete shows in drop down abc and abd.

               

              rfsam1.png

               

               

              Now I do not click on abc or abd but instead I click on the clear button.

               

              rfsam2.png

               

              Now clearAction is called which stets autoOn to false.

              Because of that now outputText instead of autocomplete is rendered. All of that is perfectly okay.

              The only problem is (as also explained in my initial post), that the drop down box with the last entries (in this case with abc and abd) remain on the browser window and you can not get rid of it unless you press the reload button of the browser.

               

              rfsam3.png

               

              Here the adapted bean:

               

              @ManagedBean(name = "tacBean")
              @SessionScoped
              public class TestAutoCompBean extends BaseBean {
              
              
                        final Logger logger = LoggerFactory.getLogger(TestAutoCompBean.class);
              
              
                        private List<String> nameList;
                        private String name;
                        private boolean autoOn;
              
              
                        public TestAutoCompBean() {
                                  nameList = new ArrayList<String>();
                                  nameList.add("abc");
                                  nameList.add("abd");
                                  autoOn = true;
                        }
              
              
                        public List<String> acName(String suggest) {
                                  logger.info("suggest = " + suggest); 
                
                                  return nameList;
                        }
              
              
                        public String clearAction() {
                                  logger.info("name = " + name);
                
                                  autoOn = !autoOn;
                
                                  setName(null);
                                  return null;
                        }
              
              
                        public String getName() {
                                  return name;
                        }
              
              
                        public void setName(String name) {
                                  logger.info("setName = " + name);
                                  this.name = name;
                        }
                
                        public boolean isAutoOn() {
                                  return autoOn;
                        }
              }
              
              
              

               

              And here the adapted xhtml:

               

               

              <?xml version="1.0" encoding="UTF-8" ?>
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml"
                        xmlns:f="http://java.sun.com/jsf/core"
                        xmlns:h="http://java.sun.com/jsf/html"
                        xmlns:ui="http://java.sun.com/jsf/facelets"
                        xmlns:a4j="http://richfaces.org/a4j"
                        xmlns:rich="http://richfaces.org/rich">
              
              
              <f:view>
                        <h:head>
                        </h:head>
                        <h:body>
              
              
                                  <rich:panel id="acTestPanel">
                                            <h:form>
                                                      <rich:autocomplete value="#{tacBean.name}" var="val"
                                                                fetchValue="#{val}" autocompleteMethod="#{tacBean.acName}"
                                                                autofill="false" mode="ajax" minChars="0"
                                                                rendered="#{tacBean.autoOn}">
                                                                <h:outputText value="#{val}" />
                                                      </rich:autocomplete>
              
              
                                                      <h:outputText value="Text instead of AutoComplete"
                                                                rendered="#{! tacBean.autoOn}" />
              
              
                                                      <a4j:commandButton value="Clear" title="Clear"
                                                                action="#{tacBean.clearAction}" render="acTestPanel" />
                                            </h:form>
                                  </rich:panel>
              
              
                        </h:body>
              </f:view>
              </html>
              
              

               

               

              Best regards,

              Georg

              • 4. Re: Drop down in AutoComplete does not disappear
                roet42

                I get the same behaviour when using a rich:autocomplete component within a modal panel.  if i close the modal panel while the suggestion list is displayed it remains oon the page even after the modal panel has been hidden.

                • 5. Re: Drop down in AutoComplete does not disappear
                  krzysztof.tomaszewski

                  Problem still exists: RichFaces 4.2.2, IE 8, rich:autocomplete placed on modal rich:popup. Simplest scenario for reproduce the error:

                   

                  1) open modal popup with rich:autocomplete

                  2) open list of suggestions (dropdown list)

                  3) close the popup (by using "X" button in title bar)

                   

                  The dropdown list stays.