OwlCarouse in React - strange behavior

Question

please take a look at this site . Especially at the "Opinie i recenzje" section in the bottom. Here you can see the owl carousel:

Since some text are too long I created a component called ExpandText that will show more text on click, and hide text on next click.

For some of the boxes works fine. For other boxes it does not expand. However if you click the non expanding-text when the box is at a different position, it will eventually work fine:/

In order to expand you have to click on Zwiń .

Here is the Expand Component:

export class ExpandText extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showFull: false
        };
    }

    render() {
        let visibleText = null;
        let expander = null;

        if (this.state.showFull || this.props.text.length <= this.props.maxLength) {
            visibleText = this.props.text;
        } else {
            visibleText = this.props.text.substring(0, this.props.maxLength);
        }

        const self = this;
        const clickHandler = () => {
            self.setState({showFull: !self.state.showFull});
        }

        if(this.props.text.length > this.props.maxLength){
            expander = this.state.showFull
                ? <span onClick={clickHandler}><b>Zwiń</b></span>
                : <span onClick={clickHandler}><b>Rozwiń</b></span>;
        }

        return <React.Fragment>
            {visibleText} {expander}

        </React.Fragment>;
  }
}

And here is the Owl Carousel section:

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
const OwlCarousel = dynamic(import("react-owl-carousel3"));
import { finalPath } from "../../pages/index";
import Link from "next/link";
import {ExpandText} from "./ExpandText";


const options = {
  loop: true,
  nav: true,
  autoplay: true,
  autoplayHoverPause: true,
  mouseDrag: true,
  center: true,
  dots: false,
  navText: [
    "<i class='icofont-bubble-left'></i>",
    "<i class='icofont-bubble-right'></i>",
  ],
  responsive: {
    0: {
      items: 1,
    },
    768: {
      items: 2,
    },
    1200: {
      items: 3,
    },
  },
};

const Feedback = () => {
  const [display, setDisplay] = useState(false);

  useEffect(() => {
    setDisplay(true);
  });

  return (
    <section className="feedback-area ptb-100 bg-gray" id="references">
      <div className="container">
        <div className="section-title">
          <h2>Opinie i recenzje</h2>
          <div className="bar"></div>
          <p>
            Zobacz, co o książęce „Sekrety Rozwoju Osobistego” mówią ci, którzy
            już ją przeczytali.
          </p>
          <p>
            Już przeczytana?{" "}
            <Link href="/opinie">
              <a>Zostaw opinię.</a>
            </Link>
          </p>
        </div>

        <div className="row">
          {display ? (
            <OwlCarousel
              className="feedback-slides owl-carousel owl-theme"
              {...options}
            >
              <div className="col-lg-12">
                <div className="single-feedback-box">
                  <div className="client-info">
                    <img src={finalPath + "/images/client1.jpg"} alt="client" />
                    <h3>Alit John</h3>
                    <span>Web Developer</span>
                  </div>
                  <p>
                    <ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
                  </p>
                </div>
              </div>

              <div className="col-lg-12">
                <div className="single-feedback-box">
                  <div className="client-info">
                    <img src={finalPath + "/images/client2.jpg"} alt="client" />
                    <h3>Alit John</h3>
                    <span>SEO Expert</span>
                  </div>
                  <p>
                  <ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glancePlan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
                  
                  </p>
                </div>
              </div>

              <div className="col-lg-12">
                <div className="single-feedback-box">
                  <div className="client-info">
                    <img src={finalPath + "/images/client3.jpg"} alt="client" />
                    <h3>Steven John</h3>
                    <span>Web Developer</span>
                  </div>
                  <p>
                  <ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
                  </p>
                </div>
              </div>

              <div className="col-lg-12">
                <div className="single-feedback-box">
                  <div className="client-info">
                    <img src={finalPath + "/images/client4.jpg"} alt="client" />
                    <h3>David Warner</h3>
                    <span>Web Developer</span>
                  </div>
                  <p>
                  <ExpandText maxLength={100} text={"Plan ahead by day, week, or month, and see project status at a glance. Search and filter to focus in on anything form a single project individual. Plan ahead by day, week, or month, and see project status at a glance."} />
                  </p>
                </div>
              </div>
            </OwlCarousel>
          ) : (
            ""
          )}
        </div>
      </div>

      <svg
        className="svg-feedback-bottom"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
      >
        <path d="M0,70 C30,130 70,50 100,70 L100,100 0,100 Z" fill="#ffffff" />
      </svg>
    </section>
  );
};

export default Feedback;

In package.json I have this version:

   "react-owl-carousel3": "^2.2.5",

Anybody knows why such issue? The GitHub officla repo seems to be unresponsive since months... I also searched existing issues or past issues, but I couldn't find anything related. I found this issue however, but tried to apply the fix, recompiled, but the problem didn't fix. So it's probably something else.

Answer 1

I noticed that the unclickable slides had a class cloned . Thus I searched... and found this issue: https://github.com/OwlCarousel2/OwlCarousel2/issues/2091

I set:

loop:false,
rewind:true,
items:3,
startPosition:1,

And it now works fine