Angular-tree-component: Why is scrollIntoView necessary?

[tashoecraft]

I posted an issue earlier about my tree jumping on selection, and the problem seems to be with scrollIntoView. Why does the viewport.scrollTop value need to be adjusted on each selection? When I comment out the whole block the tree seems to function correctly and as intended.

[tashoecraft]

It seems to be helpful for when you are using the arrow keys to navigate the tree, but messes with onclick selection. Am I the only one that has this problem?

[adamkleingit]

But what is the problem? The scroller doesn't jump anywhere unless the node is semi hidden

[tashoecraft]

That's not been my case, I think it has to do with my class adjusting the padding height on the nodes. So sometimes if I click a node in the bottom or top third the whole scroller jumps. The tree very much needs additional height to be usable on mobile, but what I'm surprised at is node.position seems to be incorrect with the padding adjustments. If I comment out this position in scrollIntoView, then the tree doesn't jump at all.

[tashoecraft]

@adamkleingit You can see in this gif, http://g.recordit.co/AAFQPHoLDf.gif , that about half way through when I click on file 16, it jumps, and file 16 is not semi hidden.

[adamkleingit]

@tashoecraft
Can you share your code? Maybe the nodeHeight you supply is wrong?

[tashoecraft]

    this.options = {
      getChildren: (node: TreeNode) => {
        this.dispatcher.emit(this.prepareActionsService.prepare('getFiles', [
          this.provider,
          node.data.id
        ]));
      },
      useVirtualScroll: true,
      nodeHeight: 44
    };

file-explorer {
      .clearfix();
      .ui.button {
        margin-top: 15px;
        margin-bottom: 15px;
        float: right;
      }
    }
    tree-viewport {
      max-height: 500px;
      -webkit-overflow-scrolling: touch;
    }
   .node-content-wrapper {
      display: block;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 30px;
      font-size: 16px;
   }
   .tree-children {
     padding-left: 5px;
     .bp-min(@screen-sm-min, {
       padding-left: 20px;
     });
   }
   }

[dachev]

Though it's hard to reproduce, I've also seen it jump outside the viewport. I think this behavior should be exposed as an option.

[adamkleingit]

@tashoecraft @dachev I agree.
I will add scrollOnFocus to the options in the coming version

[dannyzhan]

@adamkleingit I also encountered this issue.
This is a problem for large trees.
It's up to users to decide when to scroll, I think.

[jb44]

+1
I have this problem too - on large trees, when indentation causes the lines to wrap, double clicking will cause the viewport to jump around.

[AjaiGuvaliour]

Is there any way to fire scroll event on tree?
I need to do custom lazy load so i need to call the event