Fix: Manually dispatch scroll event (#940)

box · Feb 25, 2019 · 8954639 · 8954639
1 parent bf9c94f
commit 8954639
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/lib/VirtualScroller.js b/src/lib/VirtualScroller.js
@@ -421,6 +421,10 @@ class VirtualScroller {
             // will get rendered.
             const topPosition = (this.itemHeight + this.margin) * rowIndex;
             this.scrollingEl.scrollTop = topPosition;
+            // Some browsers don't fire the scroll event when setting scrollTop
+            // (IE11 & Firefox) so we need to manually dispatch the event
+            // in order to trigger `onScrollHandler` to render the items
+            this.scrollingEl.dispatchEvent(new Event('scroll'));
         }
     }
 

diff --git a/src/lib/__tests__/VirtualScroller-test.js b/src/lib/__tests__/VirtualScroller-test.js
@@ -52,11 +52,11 @@ describe('VirtualScroller', () => {
     describe('init()', () => {
         beforeEach(() => {
             stubs.validateRequiredConfig = sandbox.stub(virtualScroller, 'validateRequiredConfig');
+            stubs.renderItems = sandbox.stub(virtualScroller, 'renderItems');
         });
 
         it('should parse the config object', () => {
             stubs.renderItemFn = sandbox.stub();
-            stubs.renderItems = sandbox.stub(virtualScroller, 'renderItems');
             stubs.bindDOMListeners = sandbox.stub(virtualScroller, 'bindDOMListeners');
 
             virtualScroller.init({
@@ -100,7 +100,6 @@ describe('VirtualScroller', () => {
 
         it('should call renderItems with the provided initialRowIndex', () => {
             stubs.renderItemFn = sandbox.stub();
-            stubs.renderItems = sandbox.stub(virtualScroller, 'renderItems');
 
             virtualScroller.init({
                 totalItems: 10,
@@ -115,7 +114,6 @@ describe('VirtualScroller', () => {
 
         it('should call renderItems with 0 if initialRowIndex falls within first window', () => {
             stubs.renderItemFn = sandbox.stub();
-            stubs.renderItems = sandbox.stub(virtualScroller, 'renderItems');
 
             virtualScroller.init({
                 totalItems: 10,
@@ -462,7 +460,8 @@ describe('VirtualScroller', () => {
         let listEl;
 
         beforeEach(() => {
-            scrollingEl = { remove: () => {} };
+            stubs.dispatchEvent = sandbox.stub();
+            scrollingEl = { remove: () => {}, dispatchEvent: stubs.dispatchEvent };
 
             virtualScroller.totalItems = 10;
             virtualScroller.itemHeight = 10;
@@ -488,27 +487,31 @@ describe('VirtualScroller', () => {
 
             expect(stubs.isVisible).not.to.be.called;
             expect(scrollingEl.scrollTop).to.be.undefined;
+            expect(stubs.dispatchEvent).not.to.be.called;
         });
 
         it('should do nothing if rowIndex is < 0', () => {
             virtualScroller.scrollIntoView(-1);
 
             expect(stubs.isVisible).not.to.be.called;
             expect(scrollingEl.scrollTop).to.be.undefined;
+            expect(stubs.dispatchEvent).not.to.be.called;
         });
 
         it('should do nothing if rowIndex is = totalItems', () => {
             virtualScroller.scrollIntoView(10);
 
             expect(stubs.isVisible).not.to.be.called;
             expect(scrollingEl.scrollTop).to.be.undefined;
+            expect(stubs.dispatchEvent).not.to.be.called;
         });
 
         it('should do nothing if rowIndex is > totalItems', () => {
             virtualScroller.scrollIntoView(11);
 
             expect(stubs.isVisible).not.to.be.called;
             expect(scrollingEl.scrollTop).to.be.undefined;
+            expect(stubs.dispatchEvent).not.to.be.called;
         });
 
         it('should set the scroll top if item is not found', () => {
@@ -519,6 +522,7 @@ describe('VirtualScroller', () => {
             expect(stubs.isVisible).not.to.be.called;
             expect(stubs.scrollIntoView).not.to.be.called;
             expect(scrollingEl.scrollTop).not.to.be.undefined;
+            expect(stubs.dispatchEvent).to.be.called;
         });
 
         it('should scroll item into view if found but not visible', () => {
@@ -530,6 +534,7 @@ describe('VirtualScroller', () => {
             expect(stubs.isVisible).to.be.called;
             expect(stubs.scrollIntoView).to.be.called;
             expect(scrollingEl.scrollTop).to.be.undefined;
+            expect(stubs.dispatchEvent).not.to.be.called;
         });
 
         it('should not scroll if item is found and visible', () => {
@@ -541,6 +546,7 @@ describe('VirtualScroller', () => {
             expect(stubs.isVisible).to.be.called;
             expect(stubs.scrollIntoView).not.to.be.called;
             expect(scrollingEl.scrollTop).to.be.undefined;
+            expect(stubs.dispatchEvent).not.to.be.called;
         });
     });