aurelia / aurelia/ui-virtualization

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

Open
#178 12 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
89
Forks
44
PR merge metrics
No merged PRs in 30d

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.
```
//attached somewhere down the page

//other elements in here
//has overflow: auto; and a fixed height



nested stuff here





```

**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.

Contributor guide

Open the contributing guide

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.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.