DataTable: Missing rows when filtering with VirtualScroller in Firefox

[sasa0103]

Describe the bug

When you scroll down some rows and use the filter, no result is shown. In Chrome it works, but not in Firefox. I used the example from the documentation (virtualscroller) and added some filters to reproduce the problem in my application.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-kfn7nh?file=/src/App.js:745-754

PrimeReact version

10.0.5

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Firefox 118.0.2 (64-bit)

Steps to reproduce the behavior

1. Open example with table and filters
2. Copy "Vin" value from first row
3. Scroll down to e.g. line 20
4. Enter copied text to filter
5. Entry is not shown

Expected behavior

Row with the copied entry should be shown.

[sasa0103]

Any idea when this will be fixed?

[melloware]

No idea unless you have a PrimeTek PRO account and can request this fix through your PRO support.

[kl-nevermore]

In Firefox, when content transitions from a scrollable to a non-scrollable due to filtering, the calculation logic is not triggered.

There is a temporary workaround: manually invoke the scrollInView when the items changed

There hasn't been extensive testing, so it's unclear if this workaround may introduce new issues.

[heshamwhite]

There is a temporary workaround: manually invoke the scrollInView when the items changed

@kl-nevermore On which element should scrollInView be invoked?
Because I tried to call it on the p-datatable,p-datatable-table and p-datatable-tbody without success.
It couldn't be invoked on a "tr" as the tbody is completely empty hence "Missing rows"

Thank you :)

[kl-nevermore]

const tableRef = useRef()
<DataTable
        ref={tableRef}
        value={cars}
        filters={filters}
        filterDisplay="row"
        globalFilterFields={["vin", "year", "brand", "color"]}
        scrollable
        scrollHeight="400px"
        virtualScrollerOptions={{ itemSize: 46 }}
        tableStyle={{ minWidth: "50rem" }}
        onValueChange={(e) => {
        // try it
          const vs = tableRef.current.getVirtualScroller();
          tableRef.scrollInView();
        }}
      >

[heshamwhite]

Thank you for your reply but neither the tableRef object not the tableRef.current has a scrollIntoView function

tableRef.scrollInView is not a function

TypeError: tableRef.current.scrollInView is not a function

am I missing something?

Here is a sandbox of the change.

[kl-nevermore]

ohh I pasted it wrong
@heshamwhite
https://codesandbox.io/p/sandbox/primereact-demo-forked-9r6dqh?file=%2Fsrc%2FApp.js%3A32%2C20

[kl-nevermore]

[heshamwhite]

super, yes it works. Thank you for your help!

Hopefully the original bug would be fixed soon

[ssode]

Hey, I recently came across the same issue and tried applying the workaround mentioned here, but noticed that when using TypeScript VirtualScroller.scrollInView expects at least 2 arguments. It seems to work for the filtering issue either way if casted, but now I'm seeing some weird behavior if I scroll down a bit and then sort on a column. The scroll bar will jump to a seemingly random position and not display any rows until the user manually scrolls the table again whereas in Chrome doing the same thing will reset the scroll position to the top and rows will be displayed normally.

https://stackblitz.com/edit/k45amg?file=src%2FApp.tsx

[melloware]

I don't see scrollIntoView in your reproducer?