Why don't simulated mouse clicks fire the focus event / text cursor?

I am trying to redirect a click event from some element that is on the screen to a text input that is off. Clicking on an element that is on the screen triggers a handler that simulates the same event on the off-screen element.

When the user clicks text input through the browser, both focuses and click handlers for text input. However, when a simulated click event is dispatched on an off-screen text input, focus events do not occur.

In addition, when a simulated focus image is triggered on a text input, the cursor does not appear in the text input as if it had pressed text input.

A runnable snippet is available at http://jsfiddle.net/k32n30vf/2/ as SO doesn't support CoffeeScript.

Code (CoffeeScript)

one = document.getElementById("one")
two = document.getElementById("two")
logger = document.getElementById("log")

#In order for the span to be focusable, it must have tabIndex != -1
one.tabIndex = 0

#Adds text to top of logger paragraph
log = (message) -> 
  entry = document.createElement('p')
  entry.classList.add("log")
  entry.innerText = message
  logger.insertBefore(entry, logger.firstChild)

#Event listener that logs events w / source
reportEvent = (event) -> log("#{event.currentTarget.id} #{event.type}")

#Listen on click and focus for both elements
e.addEventListener "click", reportEvent, false for e in [one, two]
e.addEventListener "focus", reportEvent, false for e in [one, two]

#Generic simulate method
simulate = (what, where) -> 
  where = if where == "one" then one else two
  what = if what == "click" then new MouseEvent("click") else new FocusEvent("focus")
  where.dispatchEvent what

#Wire up buttons
document.getElementById("sim-one-clk").addEventListener("click", () -> simulate("click", "one"))
document.getElementById("sim-two-clk").addEventListener("click", () -> simulate("click", "two"))
document.getElementById("sim-one-fcs").addEventListener("focus", () -> simulate("focus", "one"))
document.getElementById("sim-two-fcs").addEventListener("focus", () -> simulate("focus", "two"))

      

        
        
        
      

    

CSS

p.log {
    margin: 0px;
    padding: 0px;
}

      

        
        
        
      

    

Html

<p> Instructions:</p>
    <ol>
        <li> Click "Simulate Click on #2"</li>
        <li> Note how no text cursor appears on input</li>
        <li> Actually click on input</li>
        <li> Note how text cursor appears on input</li>
    </ol>
<p><span id="one">This span is #1</span>
</p>
<p>
    <input id="two" value="this input is #2"></input>
</p>
<p>
    <input id="sim-one-clk" type="button" value="Simulate Click on #1"></input>
</p>
<p>
    <input id="sim-one-fcs" type="button" value="Simulate Focus on #1"></input>
</p>
<p>
    <input id="sim-two-clk" type="button" value="Simulate Click on #2"></input>
</p>
<p>
    <input id="sim-two-fcs" type="button" value="Simulate Focus on #2"></input>
</p>
<p id="log"></p>

      

        
        
        
      

    

Note that if an element on the screen is focused and a button is pressed Simulate Click on #2, the text cursor does not appear on the off screen element. However, when you click on an element off-screen, a text cursor appears.