Trees "Jumpy" with ClickListeners

Vaadin 6 / 7 / 8
1

Hello,

I’ve noticed that when a ClickListener is added to a Tree it becomes much harder to use from a user perspective. Selecting an item is inconsistent, the selection “Jumps” around. An example can be found
here
 (Tree on the left changes directories when double clicked). My ClickListener logic is below for reference.

if (event.isDoubleClick()) {
    changeDirectory((File) event.getItemId());
}

It doesn’t get much simpler than that :slight_smile:

Is there any way to workaround this issue? Are there plans to fix this in the future? To me this seems like a significant usability bug.

Thanks!
Bryson

2

I have one idea. Try to set null selection allowed to false:

tree.setNullSelectionAllowed(false);

This must prevent jump effect. You have to have something likes the following:

        Tree tree = new Tree();
        tree.setSelectable(true);
        tree.setMultiSelect(false);
        tree.setNullSelectionAllowed(false);
        tree.setNewItemsAllowed(false);
        tree.addItemClickListener(new ItemClickEvent.ItemClickListener() {
            
            @Override
            public void itemClick(ItemClickEvent event) {
                Notification.show(event.getItemId().toString());
            }
        });
3

Thanks for the response - that didn’t work in my case. Removing the ClickListener fixes the problem, but that’s a bit counter-productive :slight_smile:

Any other suggestions are greatly appreciated!

4

I have a working example based on Vaadin 7.3.4.

May be you have side effect inside the changeDirectory method.

5

I don’t think that’s the case because this is observed even with a fresh UI, before a double-click event occurs. In any case changeDirectory() only parses the File’s path and redirects the user to a RESTful URI for the folder. Try double clicking the Tree in the example I sent and you’ll see what I mean.

I’ll try upgrading to 7.3.4 and see if that helps.

6

Do you have own URI handler for uri like this “#!files/Home/Videos”?

7

No, I handle that with event.getParameters() in the View.enter() method.

I’ll scour my code again and see if I can find anywhere I call setNullSelectionAllowed(true), but I’m 99% sure properties like this aren’t modified elsewhere. I’ll also try to put together a simple example reproducing the issue in my environment.

8

I will be waiting for the reprocode. Do you use Maven?

9

I am very happy to report that upgrading from 7.3.0 to 7.3.4 resolved this issue! It did require a widgetset recompile as well.

Thanks for all of the assistance Anatoly. It is very much appreciated. Below is an example I came up with which reproduces the issue in 7.3.0 if anyone is interested.

-Bryson

public class VdnUI extends UI  {
    
    private static final long serialVersionUID = 1L;
    
    @Override
    protected void init(VaadinRequest request) {
        HorizontalLayout content = new HorizontalLayout();
        content.setMargin(true);
        content.setSpacing(true);
        setContent(content);
        
        /* With click listener */
        Tree tree1 = new Tree();
        tree1.setNullSelectionAllowed(false);
        tree1.addItemClickListener(new ItemClickListener() {
            private static final long serialVersionUID = 1L;

            @Override
            public void itemClick(ItemClickEvent event) {
                Notification.show(event.getItemId().toString());
            }
        });
        
        /* Without click listener */
        Tree tree2 = new Tree();
        tree2.setNullSelectionAllowed(false);
        
        addItems(tree1);
        addItems(tree2);
        
        content.addComponent(tree1);
        content.addComponent(tree2);
    }
    
    private void addItems(Tree tree) {
        String items = "Item1 Item2 Item3 Item4";
        tree.addItems((Object) items.split(" "));
        for (String item : items.split(" ")) {
            String child = "Child of " + item;
            tree.addItem(child);
            tree.setParent(child, item);
            tree.setChildrenAllowed(child, false);
        }
    }
}