1

I was checking virtual scroll list with reactive forms. Scenario is that i have thousands of rows to show in a list with checkboxes to approve or disprove.

So inside virtual list i am generating form group with [formGroupName]="i".

But if i check one checkbox, while scrolling it randomly selects and checks other checkboxes too.

This is really weird.

Blitz can be seen here Any advice or tips would be helpful. Thanks

To reproduce this issue, you can scroll all the way down to last item and mark it uncheck and then scroll back to top and go back down again. You will see erratic behaviour, it will be marked checked again. And on clicking any in middle or at top, other ones will be checked also randomly.

famed1900
  • 39
  • 4
  • Please consider creating a [Minimal Sample StackBlitz](https://stackblitz.com/fork/angular) replicating your issue. – SiddAjmera Oct 26 '18 at 14:38
  • @SiddAjmera you are right. Just added stackblitz for your view. To reproduce, you can scroll all the way down to last item and mark it uncheck and then scroll back to top and go back down again. You will see erratic behaviour. It will be marked checked again. And on clicking any in middle or at top, other ones will be checked also – famed1900 Oct 27 '18 at 17:40
  • God. Just checked. This looks like a bug to me. Great find. I think you should report it. – SiddAjmera Oct 27 '18 at 17:44
  • I did and just like any other open source repo owner, this simply does not seem like a 'bug' to them :D . – famed1900 Oct 27 '18 at 17:45
  • Can you please share the link to your raised bug? – SiddAjmera Oct 27 '18 at 17:46
  • I created one and closed myself on his request. However, i just posted it again and here it is https://github.com/angular/angular/issues/26799 – famed1900 Oct 27 '18 at 17:57
  • I just +1ed you. Let's hope they take it seriously and fix it. – SiddAjmera Oct 27 '18 at 17:59
  • @SiddAjmera thanks for support :) – famed1900 Oct 27 '18 at 18:02

2 Answers2

1

So there are possible two known fixes to me.

  1. Use an external index. In my case, i added a new form control inside the form group named 'index' and added the incremented value to each form group. Then i used this as [formGroupName]="item.controls.index.value" and use this as an index to access values.

  2. Other work around is to use [formGroup]="item" instead of [formGroupName]="i". This solution was provided in Angular Material repository.

famed1900
  • 39
  • 4
0

I was able to manage it by getting a payload from API request which includes index numbers of each items.

Virtual scroll was changing filtered items' index on the page simultenously on typeahead. That was causing the problem to catch which element is clicked on the page.

Instead of using i as index for the elements, I have used payload which includes index numbers for each item.

ofcyln
  • 56
  • 1
  • 4