I have a <input> which performs a search in Javascript when onchange, onkeydown etc fires. This builds a <table> of results which is displayed below the <input> using position: absolute. This works.
The table contains clickable cells
let td = document.createElement ("td");tr.appendChild (td);td.appendChild (document.createTextNode (search_result.label));td.onclick = create_click_handler (search_result);The issue is that if the <input> has focus then onclick only fires on the second click. So if I perform this sequence of actions:
- type search text (results are built)
- click a
<td>(nothing happens) - click the
<input>to regain focus (nothing happens) - click a
<td>(nothing happens) - click the
<input>to regain focus (nothing happens) - click a
<td>(nothing happens) - click the
<input>to regain focus (nothing happens) - click a
<td>(nothing happens) - click a
<td>(NOW the onclick handler is called!)
When td.onclick fires, it runs correctly. If I trap "Event Listener Breakpoints" for Mouse > click in Firefox's Debugger, this confirms that onclick does not happen at all for the first click. In other words, this seems to be because of something in the DOM rather than something wrong with the Javascript.
The behaviour is the same in Firefox and Chrome, so I assume it's "correct" behaviour according to some standard.
How can I ensure the first click on this td always triggers the event handler?