Angular-tree-component: scrollIntoView doesn't work properly for some cases

[johnking]

@adamkleingit

Hi there,

I found one issue with the API call - scrollIntoView. For my case, it works most time with a small tree, but does not work for the large tree. So I created my own local function based on the source code below.

TreeNode.prototype.scrollIntoView = function () {
        if (this.elementRef) {
            var nativeElement = this.elementRef.nativeElement;
            nativeElement.scrollIntoViewIfNeeded && nativeElement.scrollIntoViewIfNeeded();
            return this;
        }
    };

I am using scrollIntoView instead of scrollIntoViewIfNeeded, which is also suggested by
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded

My code:

        if (this.focusedNode) {
          if (this.focusedNode.elementRef) {
            let nativeElement = this.focusedNode.elementRef.nativeElement;
            nativeElement.scrollIntoView();
          }
        };

It works for both small and large trees.

I hope my finding and solution will be helpful to others.

Best

-John

[denkomanceski]

The best way would be to actually add a boolean to the scrollIntoView function which if true will force to scroll with scrollIntoView(), otherwise use scrollIntoViewIfNeeded.. I also have the same problem.. when I dynamically add a new node and update the tree, I can call focus() and it works fine, but scrollingIntoView doesnt

For now, when I initialize the app I override this one like that and seems to be okay

[adamkleingit]

Fixed in 2.8.0.
Can you verify?

[johnking]

Hi @adamkleingit,

I am using 4.1.0, and it doesn't work in my project, I tried both cases:

1. virtualScroll mode and
2. non virtualScroll mode

Since the elementRef is not supported any more, my own implementation with it is also broken.

-John

[johnking]

Hi @adamkleingit,

We can recover this issue easily either by

1. limiting the width of tree panel or
2. making the display field longer than the width of the tree panel.

I even use the full-tree example to recover this issue.

I hope my findings can help you to fix the issue.

thanks

-John

[ottosson]

I've got the same issue. scrollIntoView works in Firefox and IE11 for my application, but not in Chrome.
I can't seem to reproduce a working example to show here though.

Here is a broken example where scrollIntoView doesn't work in any browser I've tried with.

[phoude]

Having same issue as ottoson. scrollIntoView does not scroll to my node with Chrome

[adamkleingit]

This is not a chrome problem (in the latest version), it happens because currently scrolling into view only works if the tree itself is rendered within a container that is limited in height and has overflow hidden. This is because the scrolling happens inside a viewport element that is part of the tree. If the scroller is on an external element then this will (currently) not work.

The solution I will implement is to add a scrollContainer option that will allow you to specify which scrollContainer. Will publish in coming version and update docs

[adamkleingit]

Published 7.2.0

[phoude]

Hi, I might not understand how the scrollContainer is supposed to be set but here is an example where I can't get scrollIntoView to work: https://stackblitz.com/edit/angular-twwypu?file=src%2Fapp%2Fscroll-container.component.ts

[phoude]

I don't see how this issue is resolved. Check this updated version using v8: https://stackblitz.com/edit/angular-jqayg3

[adamkleingit]

Hi,
You have 2 options:
1) Give a fixed height and overflow: auto to the scrollcontainer element.

2) Set:

// css:
html {
  height: 100%;
  overflow: auto;
}

// ts:
options = {
  scrollContainer: document.documentElement
}

https://angular-cds4dx.stackblitz.io

Can you try?

[phoude]

It did the trick. Thanks!