Control.TextArea scrolls up

I am working on a Rails app which needs a text area with formatting buttons. Control.TextArea looks like just the thing. We have found one usability issue though.

When I have enough text in the text entry box that a scroll bar appears and the scroll bar has advanced so the first text is no longer visible, using the formatting buttons to insert the appropriate markup resets the scroll bar to the top of the box. This is disruptive to the editing experience because you lose your place and must use the scroll bar to locate where you were working. I can see the same behavior in the sample page (using Firefox OSX).

Any advice about how to fix this? Thanks!

Posted July 20th, 2007 at 12:49pm by masterleep

I just tested what you are describing, and it worked fine for me in Safari (Mac OS X)... then I tried it in Firefox and it acted as you described... I don't have IE or a Windows box handy, can anyone verify if this happens in IE/Windows? Or Firefox/Windows?

I also tested this using BBCode vs. Markup and it has the same bug with BBCode.

Posted July 23rd, 2007 at 10:00pm by Agent G

I've had the same problem on Firefox/Windows at work, too. Firefox/Mac definitely is frustrating on pages longer than your textarea. I don't test in IE for personal projects.....

Posted August 26th, 2007 at 11:26pm by jploudre

Just noticed a bit more: Headers cause it to scroll up but more inline manipulations do not scoll. Maybe it has to do with the replaceSelection function?

Jonathan

Posted August 26th, 2007 at 11:31pm by jploudre

It looks like changing the textarea's value causes it to scroll to the top in firefox. This can be worked around by saving off the scrollTop attribute and restoring it after the value change. The Wikipedia editor does this, for example.

Posted September 14th, 2007 at 3:46pm by masterleep

Hi, Any chance the feature mentioned by masterleep will be added to Control.Textarea? For now I've added it myself, by simply modifying the replaceSelection function:

replaceSelection: function(text){
    var scrollTop = this.element.scrollTop;
    ...
    this.element.scrollTop = scrollTop; 
},

But it would be handy to have it built in. Thanks.

Posted October 10th, 2007 at 5:45pm by Jak-S

Hi, Any chance the feature mentioned by masterleep will be added to Control.Textarea? For now I've added it myself, by simply modifying the replaceSelection function:

replaceSelection: function(text){
    var scrollTop = this.element.scrollTop;
    ...
    this.element.scrollTop = scrollTop; 
},

But it would be handy to have it built in. Thanks.

Posted October 10th, 2007 at 5:45pm by Jak-S