Sp-dev-fx-controls-react: ListView Control Sticky Header scrolling issue

[ragu64]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [2.1.0]

Expected / Desired Behavior / Question

With sticky header feature enable in the PnP ListView control with more 80 items, scrolling items missing (large blank zone). It's seems a render problem (on Chrome browser press F12 twice, the missing items magically reappears).

Thanks!

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[aaclage]

Hi @ragu64

I try with 100 items and was not able to retrieve this error, this only happens in the filter or when you list all?

[ragu64]

I have three fields (as you can see in attached image), it's happen always.
The button 'load more...' simply append 10 random items at time.
Without sticky header or using Fluent UI DetailsList it's works fine.

[aaclage]

Did you try to load all in the sticky header without the append 10 random items and happen the same error?

[ragu64]

Same error. I think is SharePoint Online effect in local (non SPO) it's works fine.

[ragu64]

This is my react component used in my spfx test webpart:

Action.tsx.txt

[AJIXuMuK]

Hi @ragu64,

I can't repro your issue. I used your code to create a web part and it behaves correctly:

[AJIXuMuK]

Could you try beta version of the library?

[ragu64]

Hi, with more than 80 items the issue recurs

[ragu64]

Could you try beta version of the library?

In beta version the stickyHeader property is disappered.

[AJIXuMuK]

@ragu64 - I just double-checked, the property is still there.
Could you please check what version of the library you have in package.json file?

[ragu64]

@ragu64 - I just double-checked, the property is still there.
Could you please check what version of the library you have in package.json file?

You are right, the property stickyHeader is still there, sorry.
after install spfx-controls-react beta in my solution:
npm install @pnp/spfx-controls-react@next --save

this is the version in my package.json:
"@pnp/spfx-controls-react": "^2.2.0-beta.056c6d9",

[aaclage]

Ok i found the issue, The List View uses the DetailsList and this one uses lazy loading "Load Content by blocks of 100 or around that" only when default vertical scroll "From Page" the content of ListView is refresh by blocks. The fixe-header doesn't activate the Page scroll and cannot refresh because header is fix only by scroll. I will try to see if the refresh block can be call when scroll with fix header to get the content of that block.

[AJIXuMuK]

@aaclage - what if we go back to the implementation with ScrollablePane?

[aaclage]

@AJIXuMuK
i will try that.

[aaclage]

@AJIXuMuK
Ok works with ScrollablePane implementation and with the lazy loading, i will revert to that control.

[aaclage]

@AJIXuMuK PR create with the revert to ScrollablePane.

[AJIXuMuK]

Thank you @aaclage!
The PR has been merged and will be available in the next release.

In a meanwhile you can test the functionality in beta version

[ragu64]

Thank you guys, now ListView stickyHeader={true} in PnP Controls 2.3.0-beta, works fine!