Table rows invisible when scrolling a table anchored part way down a document

Open
  • Is something wrong?
#178 12 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start in array-virtual-repeat-strategy.ts at getViewRange and inspect how getDistanceToParent and topBufferDistance are used. Reproduce the table inside a fixed-height scroll container, anchored part way down a Shadow DOM document, then compare scrolling with the reported zeroed buffer distance. Done means rows remain visible while scrolling regardless of the table's distance from the document top.

Written by the indexing model from the issue text.

Description

I'm submitting a bug report

  • Library Version:
    1.0.0-beta.7

Please tell us about your environment:

  • Operating System:
    Win 10

  • Node Version:
    10.16.2

  • NPM Version:
    6.9.0

  • Webpack Version
    webpack 4.41.6

  • Browser:
    Chrome 81.0.4044.113 (Official Build) (64-bit)

  • Language:
    TypeScript 3.6.4

Use Case
I put virtual-repeat.for on a tr element inside a table. The table is inside a scroll container which is inside a custom element using Shadow DOM.

<custom-element>//attached somewhere down the page
  <shadow-root>
    <controls></controls>//other elements in here
    <scroll-container>//has overflow: auto; and a fixed height
      <table>
        <tbody>
          <tr virtual-repeat.for="row of rows">
            <td><div>nested stuff here</div></td>
          </tr>
        </tbody>
      </table>
    </scroll-container>
  <shadow-root>
</custom-element>

Current behavior:
Everything works fine with the element anchored to the top of the document. However, scrolling breaks when anchoring the element part way down the page. The farther down the document a table is anchored, and the more a user scrolls down the table, the more rows are hidden and replaced with blank space. Increasing the height of the scroll container proportionally to the anchor distance from the top of the document mitigates the problem.

I tried using fixed row heights with no change in behaviour. Zooming in/out changes the number of rows that become invisible.

Expected/desired behavior:
Rows should scroll into view, even when the table isn't anchored to the top of the page.

Fix
I got the plugin working perfectly for my use case by cloning the ui-virtualization plugin and editing the function getViewRange in file array-virtual-repeat-strategy.ts.
const topBufferDistance = 0;//getDistanceToParent(topBufferEl, scrollerEl);
You can see the helper function that I zeroed out. That function's probably important for something, but replacing it with a zero seems to fix the bug.

Dominant language
TypeScript
Stars
88
Forks
44
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from aurelia/ui-virtualization

All issues in aurelia/ui-virtualization

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.