Firefox 2 Input/Textarea Element Hidden Caret (Cursor) Problem

A particularly silly bug at Ubernote has been re-filed in our bugtracker after me ignoring the original for the past few months. In Firefox 2, the form elements <input> and <textarea> sometimes have problems displaying the caret, ie, the blinking cursor. It is a bizzare bug because a user, after clicking into the input box or textarea, is able to type, characters appear, but the caret does not. I have not yet figured out what exact conditions cause the problem, but it has been fixed in Firefox 3, and so far the Firefox 3.5 beta. I found a solution at: http://www.activewidgets.com/javascript.forum.13884.14/input-fields-dont-display-the.html

The way to fix it for firefox 2 is to wrap the input element in another div, and set the style of that div to be "overflow:auto".

For example: If this is the offending input:

<input type='text' maxlength='50' />

This can be fixed by:

<div style='overflow: auto'>
     <input type='text' maxlength='50' />
</div>

For those of us who hate putting styling in the HTML itself, this can be applied with a bit of CSS using a class selector.

<div class='caretfix'>  
     <input type='text' maxlength='50' />
</div>

and then in an included CSS file:

.caretfix {
   overflow: auto;
}

To me, the most bizzare part of this bug is that in our application, we have many places where inputs and textareas are used, each of them suffering from the same problem.  As soon as I applied this solution to the first offending input, which was the first input on the page if you were walking the DOM in-order, the rest of the inputs and textareas were fixed as well.

Hope this helps somebody!