aurelia / aurelia/ui-virtualization
Table rows invisible when scrolling a table anchored part way down a document
- 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
```
**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
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