title: OwlCarouse in React - strange behavior
body: <p>please take a look at <a href="https://sekretyrozwojuosobistego.pl/" rel="nofollow noreferrer">this site</a>. Especially at the &quot;Opinie i recenzje&quot; section in the bottom.
  Here you can see the owl carousel:</p>
  <p><a href="https://i.stack.imgur.com/ZtBd6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZtBd6.png" alt="enter image description here" /></a></p>
  <p>Since some text are too long I created a component called <code>ExpandText</code> that will show more text on click, and hide text on next click.</p>
  <p>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 :/</p>
  <p>In order to expand you have to click on <code>Zwiń</code>.</p>
  <p>Here is the Expand Component:</p>
  <pre><code>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 &lt;= this.props.maxLength) {
              visibleText = this.props.text;
          } else {
              visibleText = this.props.text.substring(0, this.props.maxLength);
          }
  
          const self = this;
          const clickHandler = () =&gt; {
              self.setState({showFull: !self.state.showFull});
          }
  
          if(this.props.text.length &gt; this.props.maxLength){
              expander = this.state.showFull
                  ? &lt;span onClick={clickHandler}&gt;&lt;b&gt;Zwiń&lt;/b&gt;&lt;/span&gt;
                  : &lt;span onClick={clickHandler}&gt;&lt;b&gt;Rozwiń&lt;/b&gt;&lt;/span&gt;;
          }
  
          return &lt;React.Fragment&gt;
              {visibleText} {expander}
  
          &lt;/React.Fragment&gt;;
    }
  }
  </code></pre>
  <p>And here is the Owl Carousel section:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import dynamic from &quot;next/dynamic&quot;;
  const OwlCarousel = dynamic(import(&quot;react-owl-carousel3&quot;));
  import { finalPath } from &quot;../../pages/index&quot;;
  import Link from &quot;next/link&quot;;
  import {ExpandText} from &quot;./ExpandText&quot;;
  
  
  const options = {
    loop: true,
    nav: true,
    autoplay: true,
    autoplayHoverPause: true,
    mouseDrag: true,
    center: true,
    dots: false,
    navText: [
      &quot;&lt;i class='icofont-bubble-left'&gt;&lt;/i&gt;&quot;,
      &quot;&lt;i class='icofont-bubble-right'&gt;&lt;/i&gt;&quot;,
    ],
    responsive: {
      0: {
        items: 1,
      },
      768: {
        items: 2,
      },
      1200: {
        items: 3,
      },
    },
  };
  
  const Feedback = () =&gt; {
    const [display, setDisplay] = useState(false);
  
    useEffect(() =&gt; {
      setDisplay(true);
    });
  
    return (
      &lt;section className=&quot;feedback-area ptb-100 bg-gray&quot; id=&quot;references&quot;&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;section-title&quot;&gt;
            &lt;h2&gt;Opinie i recenzje&lt;/h2&gt;
            &lt;div className=&quot;bar&quot;&gt;&lt;/div&gt;
            &lt;p&gt;
              Zobacz, co o książęce „Sekrety Rozwoju Osobistego” mówią ci, którzy
              już ją przeczytali.
            &lt;/p&gt;
            &lt;p&gt;
              Już przeczytana?{&quot; &quot;}
              &lt;Link href=&quot;/opinie&quot;&gt;
                &lt;a&gt;Zostaw opinię.&lt;/a&gt;
              &lt;/Link&gt;
            &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;row&quot;&gt;
            {display ? (
              &lt;OwlCarousel
                className=&quot;feedback-slides owl-carousel owl-theme&quot;
                {...options}
              &gt;
                &lt;div className=&quot;col-lg-12&quot;&gt;
                  &lt;div className=&quot;single-feedback-box&quot;&gt;
                    &lt;div className=&quot;client-info&quot;&gt;
                      &lt;img src={finalPath + &quot;/images/client1.jpg&quot;} alt=&quot;client&quot; /&gt;
                      &lt;h3&gt;Alit John&lt;/h3&gt;
                      &lt;span&gt;Web Developer&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;p&gt;
                      &lt;ExpandText maxLength={100} text={&quot;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.&quot;} /&gt;
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div className=&quot;col-lg-12&quot;&gt;
                  &lt;div className=&quot;single-feedback-box&quot;&gt;
                    &lt;div className=&quot;client-info&quot;&gt;
                      &lt;img src={finalPath + &quot;/images/client2.jpg&quot;} alt=&quot;client&quot; /&gt;
                      &lt;h3&gt;Alit John&lt;/h3&gt;
                      &lt;span&gt;SEO Expert&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;p&gt;
                    &lt;ExpandText maxLength={100} text={&quot;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.&quot;} /&gt;
                    
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div className=&quot;col-lg-12&quot;&gt;
                  &lt;div className=&quot;single-feedback-box&quot;&gt;
                    &lt;div className=&quot;client-info&quot;&gt;
                      &lt;img src={finalPath + &quot;/images/client3.jpg&quot;} alt=&quot;client&quot; /&gt;
                      &lt;h3&gt;Steven John&lt;/h3&gt;
                      &lt;span&gt;Web Developer&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;p&gt;
                    &lt;ExpandText maxLength={100} text={&quot;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.&quot;} /&gt;
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div className=&quot;col-lg-12&quot;&gt;
                  &lt;div className=&quot;single-feedback-box&quot;&gt;
                    &lt;div className=&quot;client-info&quot;&gt;
                      &lt;img src={finalPath + &quot;/images/client4.jpg&quot;} alt=&quot;client&quot; /&gt;
                      &lt;h3&gt;David Warner&lt;/h3&gt;
                      &lt;span&gt;Web Developer&lt;/span&gt;
                    &lt;/div&gt;
                    &lt;p&gt;
                    &lt;ExpandText maxLength={100} text={&quot;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.&quot;} /&gt;
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/OwlCarousel&gt;
            ) : (
              &quot;&quot;
            )}
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;svg
          className=&quot;svg-feedback-bottom&quot;
          xmlns=&quot;http://www.w3.org/2000/svg&quot;
          viewBox=&quot;0 0 100 100&quot;
          preserveAspectRatio=&quot;none&quot;
        &gt;
          &lt;path d=&quot;M0,70 C30,130 70,50 100,70 L100,100 0,100 Z&quot; fill=&quot;#ffffff&quot; /&gt;
        &lt;/svg&gt;
      &lt;/section&gt;
    );
  };
  
  export default Feedback;
  </code></pre>
  <p>In package.json I have this version:</p>
  <pre><code>   &quot;react-owl-carousel3&quot;: &quot;^2.2.5&quot;,
  </code></pre>
  <p>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 <a href="https://github.com/OwlCarousel2/OwlCarousel2/issues/1864" rel="nofollow noreferrer">this issue</a> however, but tried to apply the fix, recompiled, but the problem didn't fix. So it's probably something else.</p>