focus() not working in safari or chrome

Question

I have a div that has been given a tabindex, when the div is focused(click or tabbed to) it does the following:

inserts an input into itself, gives the input focus

this works great in FF, IE and Opera

but in Chome/Safari it gives the input focus but fails to actually put the cursor inside the input (I know it gives it focus because the safari/chrome focus borders appear).

Any suggestions as to what is going on?

I have to fix the key handler after this so the arrow keys and backspace keys work too, feel free to chime in on that if you'd like.

Thank you in advance!

Here's a sample of the code:

var recipientDomElem = $("#recipientsDiv");
recipientDomElem[0].tabIndex = 0;
$("#recipientsDiv").focus(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
window.clearTimeout(statusTimer);
recipientDivHandler(code, null);
});


function recipientDivHandler(code, element){
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />');
$("#toInput").focus();
}

Another oddity about this is that tabbing through to the div will fire the div.focus() function and correctly give the input focus...it's just the click that fails. I tried putting a .click() function on the div to do the same as the focus, but it's not working.

Fourfold

I thought safari didnt support tabindex? – Dado

Can you show us the code you've written to achieve all of the above? Without seeing it, we'd be just guessing. – Tracietracing

Original post edited with a much shortened code snippet, this is the jist of what's going on... – Fourfold

Answer 1

I got the answer on my own, it might seem weak, and too simple, but it works.

Ready for this awesomeness..?

Just add a timer of 0 to the focus...for some reason it just gives it enough time to fully load the input into the DOM.

function recipientDivHandler(code, element) {
  $("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />');
  setTimeout(function() {
    $("#toInput").focus();
  }, 0);
}

If someone else can further explain this or has a better answer please feel free to take the stage :-)

Fourfold

Similar problem - input element was in DOM already and I was adding a focus/blur handler to it and later calling focus on it. The handler wasn't triggered in Chrome unless I used settimeout like you suggested (although it was actually focusing). – Candlemas

That's crazy it was working .focus() earlier without setTimeout in every browser :( – Archaic

Its well explained over here: salesforce.stackexchange.com/a/366973/141109 – Lesotho

Answer 2

Although I couldn't find this specifically stated anywhere, .focus() only works on input elements and links. It also isn't supported properly in Chrome and Safari. I posted a demo here to show you what I mean. Also note that focus() and focusin() (v1.4) have the same results.

So that being determined, try changing your function to .click()

$("#recipientsDiv").click(function(e){ ... })

Osullivan

Answer 3

set the tabIndex of 'toInput' to 0 or higher, its a known Chrome bug:

http://code.google.com/p/chromium/issues/detail?id=467043

Clank

Answer 4

Your problem is likely that you're not appending a DOM object, you're appending explicit HTML to your page -- and I doubt that Safari is updating the DOM behind the scenes.

Try to use the actual DOM methods like document.createElement() to append your input to the DOM, as described in a number of places (such as here or here or here), and then see if the Safari problem persists.

All that said, the way that you describe the issue arising -- on clicks but not tabs, for example -- would argue that the problem isn't going to be this... so now I'm curious. (In any event, using DOM methods is really the right way to add elements, so it's not a bad idea to do it anyway.)

Tracietracing

Or use jQuery to get around the browser inconsistencies. – Catamount

My point is that he's half using jQuery -- he's using it to select the object, but then appending raw HTML rather than other jQuery objects. – Tracietracing

I don't think you're exactly on the right track with this. Append actually parses the content and builds a document fragment. It's manipulating the DOM. – Christianly

Answer 5

according to the html 4.01 standard, tabindex does not apply to divs.

Catamount

I don't think this can be the issue otherwise the tabbing wouldn't work right either. It's just the clicking that is not working. – Fourfold

Answer 6

I got a similar problem with the latest chrome release, and I found out that I had in my css-reset the following

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none;

the result was that in chrome i couldn't even input text... in firefox it was possible

Foetid