Javascript onBlur results in "hidden" cursor in text field

[Sculder]

Hello,

I'm running into an interesting issue and I wanted to verify it was a bug with Internet Explorer 7.

I have a field that has an javascript onBlur event. When you set focus to the text field, it launches a custom event handler to process the existing value in that text field. Well after the onBlur function has completed, the cursor looks like it's not there, almost as if it didn't set focus to the text field you were currently on. But in fact, if you use the directional arrows on your keyboard, you'll see the focus has indeed been set to the text box, the cursor was just hidden! Has anyone else encountered this? I've been debugging this issue for a couple of days now before I rule out it's a bug in IE 7.

Thanks in advance.

[r035198x]

Hello,

I'm running into an interesting issue and I wanted to verify it was a bug with Internet Explorer 7.

I have a field that has an javascript onBlur event. When you set focus to the text field, it launches a custom event handler to process the existing value in that text field. Well after the onBlur function has completed, the cursor looks like it's not there, almost as if it didn't set focus to the text field you were currently on. But in fact, if you use the directional arrows on your keyboard, you'll see the focus has indeed been set to the text box, the cursor was just hidden! Has anyone else encountered this? I've been debugging this issue for a couple of days now before I rule out it's a bug in IE 7.



Thanks in advance.

I've seen this happen a few times.Are you sure this only happens in IE because I'm sure I've seen this in Firefox as well.
It isn't a big problem is it?

[Sculder]

In this particular case it's a big deal. If a user is completing a large form that has look-up pop-ups, each time the look-up window closes I'm setting focus back to the last field they were on via an onBlur. If the cursor isn't visible, the user doesn't know where they left off/which field the focus is set. This also occurs when they are tabbing through fields. When it gets to particular fields utilizing the onBlur event, it doesn't show the cursor. I can then tab to the next field and the cursor shows up fine. Very strange.

[r035198x]

In this particular case it's a big deal. If a user is completing a large form that has look-up pop-ups, each time the look-up window closes I'm setting focus back to the last field they were on via an onBlur. If the cursor isn't visible, the user doesn't know where they left off/which field the focus is set. This also occurs when they are tabbing through fields. When it gets to particular fields utilizing the onBlur event, it doesn't show the cursor. I can then tab to the next field and the cursor shows up fine. Very strange.

I suppose it is a big deal then. Have you tried the old hack of setting the focus to some other component first then setting it to the required control.
P.S Have you confirmed that this behavior is for IE only?

[Sculder]

I haven't been able to test in Firefox. Our product is IE only. I have taken a look at it using the Firefox IE add-on (which uses the same IE engine). So that's not saying a whole lot. I'll create a test page with the basic javascript and we'll see if I can reproduce it in Firefox.

Thanks.

[gits]

hi ...

i encountered the same problem in FF already ... to have the focused field marked as focused i decided to set its background-color too ... just to workaround the problem ... may be a setTimeout would help too when setting the focus ...

kind regards

[Sculder]

Yeah I can reproduce in FireFox. Also, setting the timeout (setTimeout()) doesn't seem to work either. I put several setTimeout(s) in there to see if waiting on the cursor to reappear would do it; no dice.

[gits]

hi ...

could you please post the code that makes the problem in FF ... i think i would like to play with it ... may be we find a solution :)

kind regards

[cranger01]

Did you ever find a solution for this?

I just posted an issue where I said the screen was frozen..couldn't cursor anything...however, after reading this post, I can tab, and the the screen functions fine...but not really user friendly. I would like to get this resolved and feel your issue is similar to mine.

Anyone please post if you have the answer. thank you.

[gits]

post some code to work with! so that we may reproduce the behaviour ... and search for a fix ...

kind regards

[muquaddim]

change the containers overflow css rule to auto. that works for FF. I think if its the same issue, it'll work for IE also.

Suppose you have this fragment.

<div>
<input name="username" />
</div>

make it

<div style="overflow:auto">
<input name="username" />
</div>

It worked for me.

[Killjoy]

I know its 6 months later, but I wish to post what for me was my solution to the same problem. And hopefully will help someone else out in the process. Good Karma etc.

Background: I had an auto suggestion textbox (A textbox with a listbox underneath that would appear or disappear depending on what the user was typing). In IE only, After I hid the listbox, the cursor (caret) in the textbox wouldn't re-appear even after I'ld set the focus back to the textbox. In FF and Opera the cursor (caret) would re-appear in the textbox as expected.
In IE, if I placed an alert() function before the textbox.focus(), then the cursor would appear correctly. Like the originally posters problem, even though the cursor (caret) wasn't appearing, I could see the textbox was the focuessed control because of the tab order.

Solution: In my case I was using listbox.style.visibility='hidden' to hide the auto suggestion listbox. When I replaced that with listbox.style.display='none' which in my case didn't have any knock on effects, this made the textbox.focus() to function correctly in IE.
It is possible in IE, that if I had set the focus to the textbox before I'd hidden the listbox, that this problem wouldn't have appeared, saddly because of all the onblur events etc going on, it was hard to arrange this.

I hope this helps someone as it caused me many hours of endless searching, and it wasn't until I read this thread, that I thought about thinking about the css styles that I was applying to the listbox control to hide it.

[gits]

thank you for posting your hints - i'm sure this will be helpful for other people who might have a similar problem ...

kind regards