Issue when using React Splide in Material tailwind library

[Sergey98Am]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to React Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.12

Description

I use React Splide in Material Tailwind library's modal dialog. I need to synchronize the main and thumbnail sliders, but in useEffect hook the sync() function doesn't work. The same issue also occurs when using the Headless UI library's modal instead of Material Tailwind (When the modal is built manually without the library,the sync works)

Reproduction Link

No response

Steps to Reproduce

1. npm i @splidejs/[email protected]
2. npm i @material-tailwind/react

import { useEffect, createRef, Fragment, useState } from "react";
import { Dialog, Button } from "@material-tailwind/react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
 
export default function App() {
  const [open, setOpen] = useState(false);
 
  const handleOpen = () => setOpen(!open);

 /**
   * The main Splide component.
   */
  const mainRef = createRef();

  /**
   * The thumbnail Splide component.
   */
  const thumbsRef = createRef();

  const mainOptions = {
    type: "loop",
    width: "800px",
    heightRatio: 1,
    pagination: false,
    arrows: false,
    cover: true,
    breakpoints: {
      768: {
        heightRatio: 0.8,
        arrows: true,
      },
    },
  };

  const thumbsOptions = {
    fixedWidth: 90,
    fixedHeight: 90,
    isNavigation: true,
    gap: 28,
    pagination: false,
    cover: true,
    arrows: false,
  };

 useEffect(() => {
    if (mainRef.current && thumbsRef.current && thumbsRef.current.splide) {
      mainRef.current.sync(thumbsRef.current.splide);
    }
  }, []);

  const slides = [
    {
      src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg',
      alt: 'img-1',
    },
    {
      src: 'https://imgv3.fotor.com/images/blog-cover-image/part-blurry-image.jpg',
      alt: 'img-2',
    },
    {
      src: 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_1280.jpg',
      alt: 'img-3',
    },
    {
      src: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg',
      alt: 'img-4',
    },
  ]
 
 const renderSlides = () => {
    return slides.map((slide) => (
      <SplideSlide key={slide.src}>
        <img src={slide.src} alt={slide.alt} />
      </SplideSlide>
    ));
  };

  return (
    <Fragment>
      <Button onClick={handleOpen} variant="gradient">
        Open Dialog
      </Button>
      <Dialog open={open} handler={handleOpen}>
        <Splide options={mainOptions} ref={mainRef}>{renderSlides()}</Splide>
        <Splide options={thumbsOptions} ref={thumbsRef}>{renderSlides()}</Splide>
      </Dialog>
    </Fragment>
  );
}

Expected Behaviour

I need the sync() function to work in useEffect when using the Material Tailwind library

[deepakrh185]

Hi @Sergey98Am I will work on this, kindly assigne it to me.

[Sergey98Am]

Hi @deepakrh185․ Thanks for responding

[deepakrh185]

Hi @deepakrh185․ Thanks for responding

kindly assigne the bug to me @Sergey98Am

[deepakrh185]

@Sergey98Am try to add
useEffect(() => {
if (mainRef.current && thumbsRef.current && thumbsRef.current.splide) {
mainRef.current.sync(thumbsRef.current.splide);
}
}, [open]);

check it works or not !!

[Sergey98Am]

@deepakrh185. Tried it, unfortunately, it didn't work

[deepakrh185]

@Sergey98Am can you brief me the scenario what it exactly happens?

[Sergey98Am]

@deepakrh185. Clicking the thumbnails slider doesn't change the main slider at the same time
material-tailwind-splide.webm

[noneex]

@Sergey98Am I've got similar problem. In my case I have thumbnails on a page and detail view in a dialog. Fixed it by the following workaround:

<Splide
  ref={(mainRefNode) => {
	  if (!mainRefNode) return;
  
	  setTimeout(() => {
		  mainRefNode.sync(thumbsRef.current.splide);
		  mainRefNode.go(thumbsRef.current.splide.index); // calling "go" here since "sync" doesn't go to appropriate slide
	  }, 0);
  }}
  ...
  >... </Splide>