Dir 'rtl' not working in vertical orientation

[Irina-Intuiface]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I'm using cdk-virtual-scroll-viewport and I'm changing dynamically by binding its dir property from ltr to rtl, to obtain a bottom to top scoller. I can see the change in the html, but visually it has no effect.

Reproduction

Steps to reproduce:

1. cdk-virtual-scroll-viewport with vertical orientation and rtl dir

Expected Behavior

Vertical scroller, oriented from bottom to top

Actual Behavior

Vertical scroller, oriented from top to bottom, no change vs. vertical orientation and ltr dir.

Environment

• Angular: 12.0.4
• CDK/Material: 12.0.4
• Browser(s): Chrome Version 97.0.4692.71 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 64-bit

[crisbeto]

What does your template look like?

[Irina-Intuiface]

Hi, my template is something like this:

<cdk-virtual-scroll-viewport 
        orientation="vertical"
        [dir]="(element.scrollDirection.toString() === 'BottomToTop') ? 'rtl' : 'ltr'"
        [itemSize]="element.itemSize"
        [style.width]="element.width + 'px'"
        [style.height]="element.height + 'px'"
        [minBufferPx]="element.height " 
        [maxBufferPx]="element.height * 1.5">
<div>
...
</cdk-virtual-scroll-viewport>

And the visual result is a vertical scroller with a ltr orientation, even though I can see the dir binding working and the value being rtl.

Thank you for looking into this.

[crisbeto]

I've trying to reproduce the issue, but I wasn't able to. Here's what I have https://stackblitz.com/edit/angular-bjqpri.

[Irina-Intuiface]

For me, this is proof it's not working, because the dir property shouldn't be an horizontal alignment only, it should start loading items from the end of the scrollviewer.

Say you have your 100000 items. If you were in horizontal orientation, and your property was rtl, the first item (to the left) of your scrollviewer is #99999 and the last (to the right) is #1. Similarly in vertical orientation, the first at item (at the top) should be #99999 and the last one (at the bottom) should be #1.

[crisbeto]

That's not how RTL works though. It's supposed to change the UI orientation, not the data, otherwise it can lead to some weird issues. For example, if you were showing something chronological (emails, chat messages), flipping the order would give RTL users a completely different experience.

[Irina-Intuiface]

I understand, although the only reason I assumed it worked this way was because this is the result of my code in horizontal orientation.

Do you have any advice on how to achieve a Bottom to Top listing, as described in my previous comment?

[crisbeto]

The easiest would be to reverse the order in your data source.

[rdlabo]

The best way to do this was to create my own STRATEGIES. I have published the STRATEGIES I use as OSS and would be happy if you find them useful.

Demo: https://rdlabo-ionic-angular-library.netlify.app/main/scroll-strategies/reverse Souce: https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/scroll-strategies#reverse-usage