Merge pull request #2343 from akiran/fix-2076

Fixed #2076 click issue in Fade mode

__tests__/regression/fix-2076.test.js

@@ -0,0 +1,3 @@
+// Test fix of #2076: Click on any slide in fade mode is triggering the click on last slide.
+
+// Todo: Need to write the test in playwright (Couldn't trigger click on inner slide in fade mode with testing library)

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   testEnvironment: "jsdom",
-  setupFilesAfterEnv: ["<rootDir>/test-setup.js"]
+  setupFilesAfterEnv: ["<rootDir>/test-setup.js"],
+  testPathIgnorePatterns: ["/node_modules/", "e2e-tests"]
 };

package.json

@@ -80,7 +80,8 @@
     "webpack": "^4.21.0",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.9",
-    "why-did-you-update": "^0.1.1"
+    "why-did-you-update": "^0.1.1",
+    "regenerator-runtime": "^0.14.1"
   },
   "dependencies": {
     "classnames": "^2.2.5",

src/track.js

@@ -67,6 +67,7 @@ const getSlideStyle = spec => {
       style.left = -spec.index * parseInt(spec.slideWidth);
     }
     style.opacity = spec.currentSlide === spec.index ? 1 : 0;
+    style.zIndex = spec.currentSlide === spec.index ? 999 : 998;
     if (spec.useCSS) {
       style.transition =
         "opacity " +
@@ -137,9 +138,7 @@ const renderSlides = spec => {
     // if slide needs to be precloned or postcloned
     if (spec.infinite && spec.fade === false) {
       let preCloneNo = childrenCount - index;
-      if (
-        preCloneNo <= getPreClones(spec) 
-      ) {
+      if (preCloneNo <= getPreClones(spec)) {
         key = -preCloneNo;
         if (key >= startIndex) {
           child = elem;
@@ -163,27 +162,27 @@ const renderSlides = spec => {
         );
       }
 
-        key = childrenCount + index;
-        if (key < endIndex) {
-          child = elem;
-        }
-        slideClasses = getSlideClasses({ ...spec, index: key });
-        postCloneSlides.push(
-          React.cloneElement(child, {
-            key: "postcloned" + getKey(child, key),
-            "data-index": key,
-            tabIndex: "-1",
-            className: classnames(slideClasses, slideClass),
-            "aria-hidden": !slideClasses["slick-active"],
-            style: { ...(child.props.style || {}), ...childStyle },
-            onClick: e => {
-              child.props && child.props.onClick && child.props.onClick(e);
-              if (spec.focusOnSelect) {
-                spec.focusOnSelect(childOnClickOptions);
-              }
+      key = childrenCount + index;
+      if (key < endIndex) {
+        child = elem;
+      }
+      slideClasses = getSlideClasses({ ...spec, index: key });
+      postCloneSlides.push(
+        React.cloneElement(child, {
+          key: "postcloned" + getKey(child, key),
+          "data-index": key,
+          tabIndex: "-1",
+          className: classnames(slideClasses, slideClass),
+          "aria-hidden": !slideClasses["slick-active"],
+          style: { ...(child.props.style || {}), ...childStyle },
+          onClick: e => {
+            child.props && child.props.onClick && child.props.onClick(e);
+            if (spec.focusOnSelect) {
+              spec.focusOnSelect(childOnClickOptions);
             }
-          })
-        );
+          }
+        })
+      );
     }
   });
 

test-setup.js

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom/extend-expect";
+import "regenerator-runtime/runtime";
 
 //Fix for "matchMedia not present, legacy browsers require a polyfill jest" error
 window.matchMedia =