Back

Explore Courses Blog Tutorials Interview Questions

element2.focus() fired after element1.onblur() not working in Fx/Chrome/Safari - Salesforce

0 votes
2 views
in Salesforce by (11.9k points)

Am on Salesforce (visualforce) and using a custom autocomplete javascript. My requirement is to trigger auto complete search on a text field element2 as soon as a selection is made from suggestions on another text field element1.

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 element2.focus() just after a selection is made on element1 and triggering the auto suggest search on element2.

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 then call element2.focus()

Here's what am experiencing in different browsers:

Chrome/Firefox 3.5, 4/Safari 5.0.3:

Select an option from suggestions under element1

Value in field changes

Suggestions collapse

Field blurs, but not sure where focus goes. Probably window

IE 8: 1. Select an option from suggestions under element1 2. Value in field changes 3. Suggestions collapse 4. Field blurs and element2 takes focus 5. Search fires for this field

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.

An interesting 'fix' I found for this is calling element2.focus() after, say, 100 ms using setTimeout(). Am guessing this is because element1's onblur is disrupting element2.focus() but am not really happy using this.

Well, any ideas?

Code Samples:

//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();

}

1 Answer

0 votes
by (32.1k points)
edited by

Here's a short example using jQuery that seems to do what you want. Any of the major frameworks would probably work just as well for this.

<html>

    <head>

        <title>Testing some JS behavior</title>

    </head>

    <body>

        <form id="fooForm">

            <label for="a">A: </label><input id="a"/><br />

            <label for="b">B: </label><input id="b"/><br />

        </form>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

        <script>

            $('#b').focus(function(e) {

                alert("Focusing on b now.");

            });

            $('#a').blur(function(e) {

                alert("Doing my business on element A.");

                $('#b').focus();

                // Stop bubbling, just in case this got triggered by them clicking into B

                return false;

            });

        </script>

    </body>

</html>

Become a salesforce certified administrator by taking up  Intellipaat’s Salesforce online training!

Related questions

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...