b:tree jumps (unexpectedly) when user clicks on tree

29 May, 2008 - 01:36 — Dale

I have discovered the following annoying problem with the b:tree widget: When a user clicks on an item in the tree, the scroll bar jumps down, causing the item selected to jump out from under the user's cursor. This will happen to b:tree widgets that exist in windows and panelsets.

Run the following example, move the scroll bar about half-way down the list, then click on an item near the bottom of the window. Notice that the item you clicked is no longer under your cursor.

<b:window>

   <div>

      <b:tree>

         <b:treeBranch label="Test" >

            <b:treeLeaf label="AAA" />

            <b:treeLeaf label="BBB" />

            <b:treeLeaf label="CCC" />

            <b:treeLeaf label="DDD" />

            <b:treeLeaf label="EEE" />

            <b:treeLeaf label="FFF" />

            <b:treeLeaf label="GGG" />

            <b:treeLeaf label="HHH" />

            <b:treeLeaf label="III" />

            <b:treeLeaf label="JJJ" />

            <b:treeLeaf label="KKK" />

            <b:treeLeaf label="LLL" />

            <b:treeLeaf label="MMM" />

            <b:treeLeaf label="NNN" />

            <b:treeLeaf label="OOO" />

            <b:treeLeaf label="PPP" />

            <b:treeLeaf label="QQQ" />

            <b:treeLeaf label="RRR" />

            <b:treeLeaf label="SSS" />

            <b:treeLeaf label="TTT" />

            <b:treeLeaf label="UUU" />

            <b:treeLeaf label="VVV" />

            <b:treeLeaf label="WWW" />

            <b:treeLeaf label="XXX" />

            <b:treeLeaf label="YYY" />

            <b:treeLeaf label="ZZZ" />

         </b:treeBranch>

      </b:tree>

   <div>

</b:window>

It is interesting to note that if you remove the div tag from the example above, the b:tree will function normally.
I have also observed that if you add height="auto" to the b:tree, the tree will again malfunction - even without the surrounding div:

<b:window>

      <b:tree height="auto">

         <b:treeBranch label="Test" >

            <b:treeLeaf label="AAA" />

            <b:treeLeaf label="BBB" />

            <b:treeLeaf label="CCC" />

            <b:treeLeaf label="DDD" />

            <b:treeLeaf label="EEE" />

            <b:treeLeaf label="FFF" />

            <b:treeLeaf label="GGG" />

            <b:treeLeaf label="HHH" />

            <b:treeLeaf label="III" />

            <b:treeLeaf label="JJJ" />

            <b:treeLeaf label="KKK" />

            <b:treeLeaf label="LLL" />

            <b:treeLeaf label="MMM" />

            <b:treeLeaf label="NNN" />

            <b:treeLeaf label="OOO" />

            <b:treeLeaf label="PPP" />

            <b:treeLeaf label="QQQ" />

            <b:treeLeaf label="RRR" />

            <b:treeLeaf label="SSS" />

            <b:treeLeaf label="TTT" />

            <b:treeLeaf label="UUU" />

            <b:treeLeaf label="VVV" />

            <b:treeLeaf label="WWW" />

            <b:treeLeaf label="XXX" />

            <b:treeLeaf label="YYY" />

            <b:treeLeaf label="ZZZ" />

         </b:treeBranch>

      </b:tree>

</b:window>

It is easy to run into this issue, it exists in the HTML version of Backbase docs (as discussed here: http://bdn.backbase.com/node/4184) and you can see it in the Backbase Explorer if you add enough treeleafs to the example.

Can anyone shed some light on this issue? Removing all enclosing div tags is not an easy solution for my situation,

thanks,