From 67cd527e1a9a47ca22027827011a533ff5636efb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Wed, 2 Mar 2022 11:58:35 +0100
Subject: [PATCH] fix(dashboard-v2): don't propagate click events to children
 of inactive slides

---
 packages/dashboard-v2/src/components/Slider/Slider.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Slider/Slider.js b/packages/dashboard-v2/src/components/Slider/Slider.js
index 1a04485d..ae311242 100644
--- a/packages/dashboard-v2/src/components/Slider/Slider.js
+++ b/packages/dashboard-v2/src/components/Slider/Slider.js
@@ -1,7 +1,6 @@
 import * as React from "react";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
-import theme from "../../lib/theme";
 
 import useActiveBreakpoint from "./useActiveBreakpoint";
 import Bullets from "./Bullets";
@@ -32,7 +31,9 @@ const Slider = ({ slides, breakpoints }) => {
   const { visibleSlides, scrollable } = useActiveBreakpoint(breakpoints);
   const [activeIndex, setActiveIndex] = React.useState(0);
   const changeSlide = React.useCallback(
-    (index) => {
+    (event, index) => {
+      event.preventDefault();
+      event.stopPropagation();
       setActiveIndex(Math.min(index, slides.length - visibleSlides)); // Don't let it scroll too far
     },
     [slides, visibleSlides, setActiveIndex]
@@ -62,7 +63,7 @@ const Slider = ({ slides, breakpoints }) => {
             <div key={`slide-${index}`}>
               <Slide
                 isVisible={isVisible || !scrollable}
-                onClick={scrollable && !isVisible ? () => changeSlide(index) : null}
+                onClickCapture={scrollable && !isVisible ? (event) => changeSlide(event, index) : null}
               >
                 {slide}
               </Slide>