title: Set focus on an element that has been partially rendered
body: <p>I have a form with an input element that updates a panel containing form elements on a <code>blur</code> event. I want the user to be able to navigate using the <code>tab</code> key. So leaving the first input using the <code>tab</code> should give focus to the first form element of the rendered form.</p>
  
  <p>Input element with <code>blur</code> event:</p>
  
  <pre><code>&lt;h:inputText class="text" id="profileLocation" value="#{cc.attrs.managedBean.profileLocation}"&gt;
      &lt;f:validateRegex pattern="([A-Z]{2}[A-Z0-9])(?:\.(\d+))?(\.\d+)?(\.\d+)?" /&gt;
      &lt;f:ajax event="blur" render="assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}"/&gt;
  &lt;/h:inputText&gt;
  </code></pre>
  
  <p>It will render the <code>assertionLocationPanel</code> defined as:</p>
  
  <pre><code>&lt;p:outputPanel id="assertionLocationPanel"&gt;
      &lt;h:inputText value="#{cc.attrs.managedBean.property}"&gt;
      &lt;/h:inputText&gt;
  &lt;/p:outputPanel&gt;
  </code></pre>
  
  <p>When using the <code>tab</code> key, the panel is updated but the focus is not on the input element. I guess this is because of the rendering. If the panel is not updated, the focus is set to the correct element.</p>
  
  <p><strong>Solution</strong></p>
  
  <p>Call a javascript function specified in the <code>onevent</code> attribute:</p>
  
  <pre><code>&lt;f:ajax event="blur" render="profileLocationErrorMessage assertionLocationPanel" listener="#{cc.attrs.managedBean.updateMessageLocation}" onevent="setFocus"/&gt;
  </code></pre>
  
  <p>the define the JS function as:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;  
      function setFocus() {
          $('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();
      }  
  &lt;/script&gt;  
  </code></pre>
  
  <p>I had to call the JS function <code>setFocus</code> instead of calling <code>$('#ConditionalComposite-ConditionalForm-1-ProfileLocation-segmentInstanceNumber').focus();</code> in the <code>onevent</code> attribute because it did not work. I kept the generated ids because I use composite, also I redefined <code>javax.faces.SEPARATOR_CHAR</code> to <code>-</code>.</p>
  
  <p>If you using the regular <code>:</code> separator, you have to escape the separator as <code>#ConditionalComposite\\:ConditionalForm1\\:ProfileLocation\\:segmentInstanceNumber</code>.</p>