OWASP O2 Platform Blog

Weird Bug with RichTextBox’s ScrollToCaret while using AppendText (trying to fix text flickering)

While tuning the API_ConsoleOut (using a RichTextBox instead of a TextBox), I found a really weird behaviour with the RichTextBox’s ScrollToCaret method.

What happened is that since a call to AppendText didn’t show the last text added, a call to ScrollToCaret is needed. But, if multiple calls to AppendText + ScrollToCaret  are made the text view would be (alternatively) on the last line and the line before (this was aligned at the top, which meant that the text would flicker).

After multiple experiements (see O2 Script below) I found that if we set the HideSelection value to false, the AppendText will trigger the correct scroll.

Here is the code that works:

var topPanel = panel.clear().add_Panel();
topPanel.fill(false).height(50);
var richTextBox = topPanel.add_RichTextBox();
richTextBox.set_Text("a".line() +
                     "b".line() +
                     "c".line() +
                     "d".line());

richTextBox.hideSelection(false);
richTextBox.append_Text("123");
richTextBox.append_Text("_");
richTextBox.append_Text("*");     //all now work as expected

Here is the full code of my tests

//var topPanel = O2Gui.open<Panel>("{name}",700,400);
var topPanel = panel.clear().add_Panel();
topPanel.fill(false).height(50);
var richTextBox = topPanel.add_RichTextBox();
richTextBox.set_Text("a".line() +
                     "b".line() +
                     "c".line() +
                     "d".line());

//variation A2)
/*
richTextBox.append_Text("123").scrollToCaret();       // works as expeceted
richTextBox.append_Text("_").scrollToCaret();        // caret is one line up
//richTextBox.append_Text("*").scrollToCaret();        // works as expeceted
*/
//variation A1)                    
/*richTextBox.append_Text("123").scrollToCaret();    // works as expeceted
this.sleep(300);
richTextBox.append_Text("_").scrollToCaret();        // caret is one line up
this.sleep(300);
richTextBox.append_Text("*").scrollToCaret();         // works as expeceted
*/

//variation B)
/*richTextBox.invokeOnThread(
    ()=>{           
            richTextBox.AppendText("123");            // works as expeceted   
            richTextBox.ScrollToCaret();
            richTextBox.AppendText("_");            // caret is one line up
            richTextBox.ScrollToCaret();
            //richTextBox.AppendText("*");            // works as expeceted
            //richTextBox.ScrollToCaret();
        });*/
//variation C)
/*Action<string> appendText  =
    (text)=>{
                var before = richTextBox.SelectionStart;
                richTextBox.AppendText(text);
                var after = richTextBox.SelectionStart;
                "text: {0} before: {1}  after: {2}".info(text, before, after);               
                richTextBox.ScrollToCaret();                
            };
           
richTextBox.invokeOnThread(
    ()=>{                           
            appendText("123");  // works as expeceted
            appendText("_");    // caret is one line up
            appendText("*");  // works as expeceted
            appendText("_");    // caret is one line up
        });
*/
 
//the solution for the problem is to set the HideSelection property set to false
//which is now exposed via an O2 Extension Method

richTextBox.hideSelection(false); // richTextBox.showSelection(); also works
richTextBox.append_Text("123");
richTextBox.append_Text("_");
richTextBox.append_Text("*");     //all now work as expectted
/*
//Variation D) using scrollToCaret brings back the problem,
richTextBox.hideSelection(false);
richTextBox.append_Text("123");
richTextBox.append_Text("_");//.scrollToCaret();
richTextBox.append_Text("*").scrollToCaret(); 
*/
return "done";

It would be great to find out exactly what was causing this behaviour, but I looks that most of the RichTextBox behaviour is triggered by Windows Messages, so its quite a rabbit hole.

November 27, 2011 - Posted by | .NET

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: