StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POelement2.focus() fired after element1.onblur() not working in Fx/Chrome/Safari - Salesforce
text
Body
copied!<p>Am on Salesforce (visualforce) and using a custom autocomplete javascript. My requirement is to trigger auto complete search on a text field <code>element2</code> as soon as a selection is made from suggestions on another text field <code>element1</code>.</p> <p>Since I need to be able to scroll through the auto suggestions list using a keyboard, I need to have focus on the particular field. Am currently doing a <code>element2.focus()</code> just after a selection is made on <code>element1</code> and triggering the auto suggest search on <code>element2</code>.</p> <p>Also, on these fields, when the search is running and the user manually focuses on the field, the auto suggestion collapses - this is an indication of cancelling the search. Because of this, I cannot trigger the search and <em>then</em> call <code>element2.focus()</code></p> <p>Here's what am experiencing in different browsers:</p> <p>Chrome/Firefox 3.5, 4/Safari 5.0.3:</p> <ol> <li>Select an option from suggestions under <code>element1</code></li> <li>Value in field changes</li> <li>Suggestions collapse</li> <li>Field blurs, but not sure where focus goes. Probably <code>window</code></li> </ol> <p>IE 8: 1. Select an option from suggestions under <code>element1</code> 2. Value in field changes 3. Suggestions collapse 4. Field blurs and <code>element2</code> takes focus 5. Search fires for this field</p> <p>Also, the above difference in behaviour is only when am selecting using a mouse click. When using a keystroke (up/down then enter) this works as expected in all browsers. The same set of javascript methods are executed on both mouse and keyboard selection.</p> <p>An interesting 'fix' I found for this is calling <code>element2.focus()</code> after, say, 100 ms using <code>setTimeout()</code>. Am guessing this is because <code>element1</code>'s onblur is disrupting <code>element2.focus()</code> but am not really happy using this.</p> <p>Well, any ideas?</p> <p>Code Samples:</p> <pre><code>//mouseclick handler function handleMouseClick(event){ element1.value = (event.target)?event.target.textContent:event.srcElement.innerText; callback(); // kills the children and hides the div containing the suggestions hideAutoComplete(); } function callback() { element2.value = ''; element2.focus(); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload