title: IE8 and Primefaces p:selectOneMenu misbehave when having a lots of p:selectOneMenu in a form
body: <p>First of all, I want to apologize for the long code I post, they are very simple, it is just a <code>p:selectOneMenu</code> that repeat 17 times (that why it is long). <strong>The problem that I experience is that if I have too many <code>p:selectOneMenu</code> in a form, the <code>selectOneMenu</code> bugged out and wont drop down when the user click on it (unless I spam click on the <code>selectOneMenu</code>)</strong>, the list will not drop down. What is very bizarre is that if it is only 1 or 2 <code>selectOneMenu</code> then it work fine (this is why I post code that display 17 drop down list). This only happen in IE8. This work fine is IE6,7 FF, Chrome.</p>
  
  <p><strong>Once again: apologize for the long code</strong></p>
  
  <p><strong>EDIT1: I just edit my code to add more entries to <code>foodList</code> to my managed bean. This is crucial in in order to replicate my issues</strong></p>
  
  <pre><code>&lt;div id="MainWrapper"&gt;
      &lt;h:form id="myForm" styleClass="mainForm"&gt;
          &lt;h:panelGrid columns="2" columnClasses="columnStyle,columnStyle"&gt;
              &lt;h:panelGrid columns="3"&gt;
                  Select Food1:
                  &lt;p:selectOneMenu id="food1" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood1"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood1" for="food1"/&gt;
  
                  Select Food2:
                  &lt;p:selectOneMenu id="food2" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood2"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood" for="food2"/&gt;
  
                  Select Food3:
                  &lt;p:selectOneMenu id="food3" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood3"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood3" for="food3"/&gt;
  
                  Select Food4:
                  &lt;p:selectOneMenu id="food4" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood4"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood4" for="food4"/&gt;
  
                  Select Food5:
                  &lt;p:selectOneMenu id="food5" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood5"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood5" for="food5"/&gt;
  
                  Select Food6:
                  &lt;p:selectOneMenu id="food6" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood6"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood6" for="food6"/&gt;
  
                  Select Food7:
                  &lt;p:selectOneMenu id="food7" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood7"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood7" for="food7"/&gt;
  
                  Select Food8:
                  &lt;p:selectOneMenu id="food8" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood8"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood8" for="food8"/&gt;
  
                  Select Food9:
                  &lt;p:selectOneMenu id="food9" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood9"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood9" for="food9"/&gt;
  
                  Select Food10:
                  &lt;p:selectOneMenu id="food10" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood10"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood10" for="food10"/&gt;
  
                  Select Food11:
                  &lt;p:selectOneMenu id="food11" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood11"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood11" for="food11"/&gt;
  
                  Select Food12:
                  &lt;p:selectOneMenu id="food12" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood12"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood12" for="food12"/&gt;
  
                  Select Food13:
                  &lt;p:selectOneMenu id="food13" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood13"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood13" for="food13"/&gt;
  
                  Select Food14:
                  &lt;p:selectOneMenu id="food14" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood14"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood14" for="food14"/&gt;
  
                  Select Food15:
                  &lt;p:selectOneMenu id="food15" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood15"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood15" for="food15"/&gt;
  
                  Select Food16:
                  &lt;p:selectOneMenu id="food16" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood16"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood16" for="food16"/&gt;
  
                  Select Food17:
                  &lt;p:selectOneMenu id="food17" required="true" value="#{viewBean.selectedFood}"
                                      styleClass="dropdown-width"&gt;
                      &lt;f:selectItem itemLabel="Select One" itemValue=""/&gt;
                      &lt;f:selectItems value="#{viewBean.foodList}"/&gt;
                      &lt;p:ajax update=":myForm:errorFood17"/&gt;
                  &lt;/p:selectOneMenu&gt;
                  &lt;p:message id="errorFood17" for="food17"/&gt;
              &lt;/h:panelGrid&gt;
              There is supposed to be another table here
          &lt;/h:panelGrid&gt;
          &lt;p:commandButton value="submit" update="myForm"/&gt;
      &lt;/h:form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Managed Bean</p>
  
  <pre><code>@ManagedBean
  @ViewScoped
  public class ViewBean implements Serializable {
  
      private List&lt;String&gt; foodList;
      private String selectedFood;
  
      public ViewBean() {
      }
  
      @PostConstruct
      public void init() {
  
          foodList = new ArrayList&lt;String&gt;();
          foodList.add("Pizza");
          foodList.add("Pasta");
          foodList.add("Hamburger");
          foodList.add("Hot Dog");
          foodList.add("Spring Roll");
          foodList.add("Grill Fish");
          foodList.add("Chips");
          foodList.add("Ramen");
      }
      //setter, getter
  }
  </code></pre>
  
  <p>Here is my CSS.</p>
  
  <pre><code>body{
      background-color: #EBEAE3;
      font-family: Trebuchet;
      margin: 0;
  }
  
  #MainWrapper{
      margin: 0 auto;
      width: 1100px;
      background-color: white;
  }
  
  .columnStyle{
      vertical-align: top;
  }
  
  .mainForm{
      margin-left: 68px;
  }
  
  .dropdown-width{
      width: 400px;
  }
  
  .ui-widget {
      font-family: Arial,sans-serif;
      font-size: 0.8em;
  }
  
  td .ui-selectonemenu {
      display:block;
  }
  </code></pre>
  
  <p>I have spent lots of time debugging this, but the fact that it bug out when there are many <code>selectOneMenu</code> and work fine when there are 1 or 2 <code>selectOneMenu</code> just rack my brain out.
  Here is my doctype</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>