angular / angular/components

Virtual scroll collectionViewer.viewChange does not emit when direction is 'rtl'

Open
#24,269 1 comment 0 reactions 0 assignees View on GitHub
area: cdk/scrolling P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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 a `cdk-virtual-scroll-viewport` with `dir='rtl'`, connected to a _CdkDataSrouce_. When scrolling, the `viewChange` event is not emmited, and though I can't load more items as I go. The same code works if I change the direction to `ltr`.

### Reproduction

My template looks like this:
```


...

```

=> where `dataConnector` is my extension of a `CdkDataSrouce`

I think it might be related to having a negative `scrollOffset` when in `rtl` direction.

### Expected Behavior

I am expecting `collectionViewer.viewChange` to fire when I scroll to the left.

### Actual Behavior

It does not fire if the `dir` property is `rtl`

### 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

Contributor guide

Open the contributing guide

Research direction

Start with the cdk-virtual-scroll-viewport behavior described in the reproduction and trace how RTL scrolling, negative scrollOffset values, and collectionViewer.viewChange interact. Reproduce the supplied template with Angular/CDK 12.0.4, then verify that scrolling left in rtl emits viewChange so additional items can load.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.