title: Setting focus on an input element after setting display:block
body: <p>I have an HTML along the following lines:</p>
  
  <pre><code>&lt;div class="hiddenClass"&gt; // this implies display:none
   &lt;span&gt;
      &lt;input type="text" id="hiddenInput"/&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and a Javascript event (triggered in a "succes" method of an  jQuery $.ajax() call ), that needs to make this div visible and then set the focus to the control. Something like:</p>
  
  <pre><code> this.DOMElements.divElement.className="showClass"; //a CSS class with display:block;
   this.DOMElements.hiddenInputElement.focus();
   this.DOMElements.hiddenInputElement.select();
  </code></pre>
  
  <p>strange enough, this code only works part of the time. In some cases (only sometimes!!) the focus/select commands generate warnings about focusing/selecting an invisible control. The control will be made visible, but the focus is not moved, nor is the text selected.</p>
  
  <p>I found (somewhat) of a solution by moving the focus/select code in a separate function and delay-call it by means of a </p>
  
  <pre><code>this.DOMElements.divElement.className="showClass"; //a CSS class with display:block;
  setTimeout("focusinput('hidddenInput')",1);
  </code></pre>
  
  <p>Ok, finally my question: since javascript is single-threaded.. how come there is a delay between the time I made the parent div visible, and the time I can set the focus/select on the child input element ? How could this be a race condition?</p>
  
  <p>Edit: Happens in IE8</p>