title: JSF 2.2 SelectManyCheck breaks javascript
body: <p>It used to work perfect on jsf 2.0 but know it renders a box at the end of the screen, with a html table with the data about locations, if I remove the converter the selectmany
  checkbox works but it still renders the box.</p>
  
  <p>
  
  </p>
  
  <pre><code>&lt;ui:composition template="/template.xhtml"&gt;
      &lt;ui:define name="title"&gt;
          &lt;h:outputText value="#{bundle.CreateOfertaTitle}"&gt;&lt;/h:outputText&gt;
      &lt;/ui:define&gt;
              &lt;ui:define name="body"&gt;
                  &lt;style type="text/css"&gt;
              input#chat {
                  width: 410px
              }
  
              #console-container {
                  width: 400px;
              }
  
              #console {
                  border: 1px solid #CCCCCC;
                  border-right-color: #999999;
                  border-bottom-color: #999999;
                  height: 170px;
                  overflow-y: scroll;
                  padding: 5px;
                  width: 100%;
              }
  
              #console p {
                  padding: 0;
                  margin: 0;
              }
          &lt;/style&gt;
                      &lt;script type="text/javascript"&gt;
              var Chat = {};
  
              Chat.socket = null;
  
              Chat.connect = (function(host) {
                  if ('WebSocket' in window) {
                      Chat.socket = new WebSocket(host);
                  } else if ('MozWebSocket' in window) {
                      Chat.socket = new MozWebSocket(host);
                  } else {
                      Console.log('Error: WebSocket is not supported by this browser.');
                      return;
                  }
  
                  Chat.socket.onopen = function() {
                      Console.log('Info: WebSocket connection opened.');
                      document.getElementById('chat').onkeydown = function(event) {
                          if (event.keyCode == 13) {
                              Chat.sendMessage();
                          }
                      };
                  };
  
                  Chat.socket.onclose = function() {
                      document.getElementById('chat').onkeydown = null;
                      Console.log('Info: WebSocket closed.');
                  };
  
                  Chat.socket.onmessage = function(message) {
                      Console.log(message.data);
                  };
              });
  
              Chat.initialize = function() {
                  if (window.location.protocol == 'http:') {
                      Chat.connect('ws://' + window.location.host + '/Formosa2/endpoint');
                  } else {
                      Chat.connect('wss://' + window.location.host + '/Socket/websocket/chat');
                  }
              };
  
              Chat.sendMessage = (function() {
                  var ofertaTexto = document.getElementById('form:texto').value;
                  var select = document.getElementById('form:empresaidEmpresa');
                  var barrio = document.getElementById('inicio_input').value;
  
                  var nombreEmpresa = select.options[select.selectedIndex].text;
                      Chat.socket.send(ofertaTexto +', '+ nombreEmpresa+','+ barrio);
                      document.getElementById('chat').value = '';
  
              });
  
              var Console = {};
  
              Console.log = (function(message) {
                  var console = document.getElementById('console');
                  var p = document.createElement('p');
                  p.style.wordWrap = 'break-word';
                  p.innerHTML = message;
                  console.appendChild(p);
                  while (console.childNodes.length &gt; 25) {
                      console.removeChild(console.firstChild);
                  }
                  console.scrollTop = console.scrollHeight;
              });
  
              Chat.initialize();
  
          &lt;/script&gt;
          &lt;h:panelGroup id="messagePanel" layout="block"&gt;
              &lt;h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/&gt;
          &lt;/h:panelGroup&gt;
          &lt;h:form id="form" enctype="multipart/form-data"&gt;
              &lt;h:outputLabel rendered="#{usuarioController.userSession.isLoggedIn}"
              value="#{usuarioController.userSession.sessionId}"/&gt;
              &lt;h:panelGrid columns="2"&gt;
                  &lt;h:outputLabel value="#{bundle.CreateOfertaLabel_texto}" for="texto" /&gt;
                  &lt;h:inputText id="texto" value="#{ofertaController.selected.texto}" title="#{bundle.CreateOfertaTitle_texto}" /&gt;
  
                  &lt;h:outputLabel value="#{bundle.CreateOfertaLabel_inicio}" for="inicio" /&gt;
                  &lt;t:inputCalendar id="inicio" value="#{ofertaController.selected.inicio}" renderAsPopup="true"
                                   popupTodayString="Hoy" popupDateFormat="MM/dd/yyyy" 
                                   popupWeekString="Semana" helpText="MM/DD/YYYY" forceId="true"/&gt;
  
                  &lt;h:outputLabel value="#{bundle.CreateOfertaLabel_fin}" for="fin" /&gt;                   
                  &lt;t:inputCalendar id="fin" value="#{ofertaController.selected.fin}" renderAsPopup="true"
                                   popupTodayString="Hoy" popupDateFormat="MM/dd/yyyy" 
                                   popupWeekString="Semana" helpText="MM/DD/YYYY" forceId="true"/&gt;
  
                  &lt;h:outputLabel value="#{bundle.CreateOfertaLabel_titulo}" for="titulo" /&gt;
                  &lt;h:inputText id="titulo" value="#{ofertaController.selected.titulo}" title="#{bundle.CreateOfertaTitle_titulo}" /&gt;
                  &lt;h:outputLabel value="#{bundle.CreateOfertaLabel_imagen}" for="imagen" /&gt;
                  &lt;h:inputFile id="imagen" value="#{ofertaController.upLoad.upFile}" title="#{bundle.CreateOfertaTitle_imagen}"/&gt;
  
                  &lt;h:outputLabel value="#{bundle.CreateOfertaLabel_empresaidEmpresa}" for="empresaidEmpresa" /&gt;                                        
                  &lt;h:selectOneMenu id="empresaidEmpresa" 
                                   value="#{ofertaController.selected.empresaidEmpresa}" 
                                   title="#{bundle.CreateOfertaTitle_empresaidEmpresa}"
                                   required="true" 
  
                                   requiredMessage="#{bundle.CreateOfertaRequiredMessage_empresaidEmpresa}"&gt;
                      &lt;f:ajax event="valueChange" execute="empresaidEmpresa" render="ubicacionCollection" /&gt;
                      &lt;f:selectItems value="#{empresaController.itemsAvailableSelectOne}"/&gt;
                  &lt;/h:selectOneMenu&gt;
  
                  &lt;h:outputLabel value="#{bundle.CreateOfertaLabel_ubicacionCollection}" for="ubicacionCollection" /&gt;      
                  &lt;h:selectManyCheckbox id="ubicacionCollection"
                                        value="#{ofertaController.selected.ubicacionCollection}"
                                        title="#{bundle.CreateOfertaTitle_ubicacionCollection}" &gt;
  
                      &lt;f:selectItems id="ubicacionCollectionItems"
                                     value="#{ofertaController.selected.empresaidEmpresa.ubicacionCollection}"
                                     var="ubicacionXEmpresa"
                                     itemLabel="#{ubicacionXempresa.barrio}"
                                     itemValue="#{ubicacionXEmpresa}"/&gt;
                 &lt;/h:selectManyCheckbox&gt;
              &lt;/h:panelGrid&gt;
              &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  &lt;noscript&gt;&lt;h2 style="color: #ff0000"&gt;Seems your browser doesn't 
                          support Javascript! Websockets rely on Javascript being enabled. Please enable
                          Javascript and reload this page!&lt;/h2&gt;&lt;/noscript&gt;
                  &lt;div&gt;
                      &lt;p&gt;
                          &lt;input type="text" placeholder="type and press enter to chat" id="chat"/&gt;
                      &lt;/p&gt;
  
                      &lt;div id="console-container"&gt;
                          &lt;div id="console"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;h:commandLink action="#{ofertaController.create}" value="#{bundle.CreateOfertaSaveLink}" onclick='Chat.sendMessage();'/&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;h:commandLink action="#{ofertaController.prepareList}" value="#{bundle.CreateOfertaShowAllLink}" immediate="true"/&gt;
              &lt;br /&gt;
              &lt;br /&gt;
  
          &lt;/h:form&gt;
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p></p>
  
  <p>My convertor:</p>
  
  <pre><code>@FacesConverter(value = "ubicacionConverter")
  public class UbicacionesBYOfertasConverter implements Converter {
  
  private FacesContext facesContext = FacesContext.getCurrentInstance();
  private OfertaController ofertaController = (OfertaController) facesContext.getApplication()
              .evaluateExpressionGet(facesContext, "#{ofertaController}", OfertaController.class);
  
  @Override
  public Object getAsObject(FacesContext context, UIComponent component, String value) {
      if (value == null) {
          return null;
      }
      System.out.println(value);
      Ubicacion ubicacion = ofertaController.getSelected().getEmpresaidEmpresa().getUbicacionCollection().iterator().next();        
      ofertaController.getSelected().setUbicacionCollection(ofertaController.getSelected().getEmpresaidEmpresa().getUbicacionCollection());
      return ubicacion;
  }
  
  @Override
  public String getAsString(FacesContext context, UIComponent component,
          Object value) {
      String string = null;
      if (value instanceof Integer) {
          string = String.valueOf(ofertaController.getSelected().getEmpresaidEmpresa().getUbicacionCollection().iterator().next().getIdUbicacion());
      }
      return string;
  }   
  }
  </code></pre>
  
  <p>Javascript exception</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of null jsf.js?       ln=javax.faces&amp;stage=Development:362
  contains jsf.js?ln=javax.faces&amp;stage=Development:362
  FrameTransport.cleanupReqParams jsf.js?ln=javax.faces&amp;stage=Development:351
  FrameTransport.callback jsf.js?ln=javax.faces&amp;stage=Development:335
  (anonymous function) jsf.js?ln=javax.faces&amp;stage=Development:380
  FrameTransport.open jsf.js?ln=javax.faces&amp;stage=Development:242
  AjaxEngine.req.sendRequest jsf.js?ln=javax.faces&amp;stage=Development:1794
  sendRequest jsf.js?ln=javax.faces&amp;stage=Development:2440
  request jsf.js?ln=javax.faces&amp;stage=Development:2450 
  ab jsf.js?ln=javax.faces&amp;stage=Development:3255
  onchange List.xhtml:169
  </code></pre>