sync from https://github.com/akiran/react-slick

__tests__/afterChange.test.js

@@ -10,6 +10,7 @@ class SliderWithBeforeChange extends React.Component {
     };
     this.afterChange = this.afterChange.bind(this);
   }
+
   afterChange(currentSlide) {
     console.log(currentSlide, "afterChange");
     this.setState({
@@ -33,16 +34,34 @@ describe("After change Slider", function() {
     const wrapper = mount(<SliderWithBeforeChange />);
     expect(wrapper.state()).toEqual({ currentSlide: null });
     wrapper.find(".slick-next").simulate("click");
-
-    //TBD . fix this test
-
-    // expect(wrapper.find('.slick-slide.slick-active').first().text()).toEqual('slide2');
-    // expect(wrapper.state()).toEqual({currentSlide: 1})
-    // wrapper.find('.slick-next').simulate('click')
-    // expect(wrapper.find('.slick-slide.slick-active').first().text()).toEqual('slide3');
-    // expect(wrapper.state()).toEqual({currentSlide: 2})
-    // wrapper.find('.slick-prev').simulate('click')
-    // expect(wrapper.find('.slick-slide.slick-active').first().text()).toEqual('slide2');
-    // expect(wrapper.state()).toEqual({currentSlide: 1})
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find(".slick-slide.slick-active")
+          .first()
+          .text()
+      ).toEqual("slide2");
+      expect(wrapper.state()).toEqual({ currentSlide: 1 });
+    }, 1);
+    wrapper.find(".slick-next").simulate("click");
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find(".slick-slide.slick-active")
+          .first()
+          .text()
+      ).toEqual("slide3");
+      expect(wrapper.state()).toEqual({ currentSlide: 2 });
+    }, 1);
+    wrapper.find(".slick-prev").simulate("click");
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find(".slick-slide.slick-active")
+          .first()
+          .text()
+      ).toEqual("slide2");
+      expect(wrapper.state()).toEqual({ currentSlide: 1 });
+    }, 1);
   });
 });

src/inner-slider.js

@@ -88,13 +88,14 @@ export class InnerSlider extends React.Component {
       }
     });
     this.ro.observe(this.list);
-    Array.prototype.forEach.call(
-      document.querySelectorAll(".slick-slide"),
-      slide => {
-        slide.onfocus = this.props.pauseOnFocus ? this.onSlideFocus : null;
-        slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null;
-      }
-    );
+    document.querySelectorAll &&
+      Array.prototype.forEach.call(
+        document.querySelectorAll(".slick-slide"),
+        slide => {
+          slide.onfocus = this.props.pauseOnFocus ? this.onSlideFocus : null;
+          slide.onblur = this.props.pauseOnFocus ? this.onSlideBlur : null;
+        }
+      );
     if (window.addEventListener) {
       window.addEventListener("resize", this.onWindowResized);
     } else {
@@ -308,7 +309,10 @@ export class InnerSlider extends React.Component {
     };
   };
   checkImagesLoad = () => {
-    let images = this.list.querySelectorAll(".slick-slide img");
+    let images =
+      (this.list && this.list.querySelectorAll &&
+        this.list.querySelectorAll(".slick-slide img")) ||
+      [];
     let imagesCount = images.length,
       loadedCount = 0;
     Array.prototype.forEach.call(images, image => {

src/utils/innerSliderUtils.js

@@ -4,6 +4,13 @@ export function clamp(number, lowerBound, upperBound) {
   return Math.max(lowerBound, Math.min(number, upperBound));
 }
 
+export const safePreventDefault = event => {
+  const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"];
+  if(!passiveEvents.includes(event._reactName)) {
+    event.preventDefault();
+  }
+}
+
 export const getOnDemandLazySlides = spec => {
   let onDemandSlides = [];
   let startIndex = lazyStartIndex(spec);
@@ -133,7 +140,7 @@ export const initializedState = spec => {
     currentSlide,
     lazyLoadedList
   });
-  lazyLoadedList.concat(slidesToLoad);
+  lazyLoadedList = lazyLoadedList.concat(slidesToLoad);
 
   let state = {
     slideCount,
@@ -161,14 +168,14 @@ export const slideHandler = spec => {
     infinite,
     index,
     slideCount,
-    lazyLoadedList,
     lazyLoad,
     currentSlide,
     centerMode,
     slidesToScroll,
     slidesToShow,
     useCSS
   } = spec;
+  let { lazyLoadedList } = spec;
   if (waitForAnimate && animating) return {};
   let animationSlide = index,
     finalSlide,
@@ -185,7 +192,7 @@ export const slideHandler = spec => {
       animationSlide = index - slideCount;
     }
     if (lazyLoad && lazyLoadedList.indexOf(animationSlide) < 0) {
-      lazyLoadedList.push(animationSlide);
+      lazyLoadedList = lazyLoadedList.concat(animationSlide);
     }
     state = {
       animating: true,
@@ -222,10 +229,11 @@ export const slideHandler = spec => {
       if (animationLeft === finalLeft) animationSlide = finalSlide;
       animationLeft = finalLeft;
     }
-    lazyLoad &&
-      lazyLoadedList.concat(
+    if (lazyLoad) {
+      lazyLoadedList = lazyLoadedList.concat(
         getOnDemandLazySlides({ ...spec, currentSlide: animationSlide })
       );
+    }
     if (!useCSS) {
       state = {
         currentSlide: finalSlide,
@@ -315,7 +323,7 @@ export const keyHandler = (e, accessibility, rtl) => {
 };
 
 export const swipeStart = (e, swipe, draggable) => {
-  e.target.tagName === "IMG" && e.preventDefault();
+  e.target.tagName === "IMG" && safePreventDefault(e);
   if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return "";
   return {
     dragging: true,
@@ -351,8 +359,8 @@ export const swipeMove = (e, spec) => {
     listWidth
   } = spec;
   if (scrolling) return;
-  if (animating) return e.preventDefault();
-  if (vertical && swipeToSlide && verticalSwiping) e.preventDefault();
+  if (animating) return safePreventDefault(e);
+  if (vertical && swipeToSlide && verticalSwiping) safePreventDefault(e);
   let swipeLeft,
     state = {};
   let curLeft = getTrackLeft(spec);
@@ -420,7 +428,7 @@ export const swipeMove = (e, spec) => {
   }
   if (touchObject.swipeLength > 10) {
     state["swiping"] = true;
-    e.preventDefault();
+    safePreventDefault(e);
   }
   return state;
 };
@@ -441,7 +449,7 @@ export const swipeEnd = (e, spec) => {
     infinite
   } = spec;
   if (!dragging) {
-    if (swipe) e.preventDefault();
+    if (swipe) safePreventDefault(e);
     return {};
   }
   let minSwipe = verticalSwiping
@@ -465,7 +473,7 @@ export const swipeEnd = (e, spec) => {
     return state;
   }
   if (touchObject.swipeLength > minSwipe) {
-    e.preventDefault();
+    safePreventDefault(e);
     if (onSwipe) {
       onSwipe(swipeDirection);
     }
@@ -530,7 +538,10 @@ export const getSlideCount = spec => {
   if (spec.swipeToSlide) {
     let swipedSlide;
     const slickList = spec.listRef;
-    const slides = slickList.querySelectorAll(".slick-slide");
+    const slides =
+      (slickList.querySelectorAll &&
+        slickList.querySelectorAll(".slick-slide")) ||
+      [];
     Array.from(slides).every(slide => {
       if (!spec.vertical) {
         if (