brainhubeu / react-carousel

A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)
https://brainhub.eu/
MIT License
1.07k stars 165 forks source link

Carrosel causes a rerender of inputs passed as slider, causing them to reset / not update state #642

Open AdrielD opened 3 years ago

AdrielD commented 3 years ago

I tried using this as slider for a table component I have. Maybe it's out of the scope of this component, but here's what happened.

Describe the bug When using a controlled input as a slide (or inside one), Carousel causes it to re-render, reseting it's state. It's not possible to type more than a few characters, before the input is reendered.

To Reproduce At the live editing demo page (e.g. https://brainhubeu.github.io/react-carousel/docs/examples/multipleSlides), paste the code below and inspect the console:

// import Carousel, { slidesToShowPlugin } from '@brainhubeu/react-carousel';
// import '@brainhubeu/react-carousel/lib/style.css';

class MyCarousel extends React.Component {
  constructor() {
    super();
    this.state = { text: "asd" };
  }

  render() {
    console.log(this.state);
    return (
      <div>
        <Carousel plugins={['arrows']} draggable={false}>
          <input
            type="text"
            value={this.state.text}
            onChange={e => this.setState({ text: e.target.value })}
          />
        </Carousel>
      </div>
    );
  }
}

carousel

ishan28mkip commented 3 years ago

I am facing the same issue, cannot update the state of the component inside the carousel. Maybe it is only made for simple images

ishan28mkip commented 3 years ago

https://github.com/brainhubeu/react-carousel/issues/645 : Maybe this fixes the issue PR raised : https://github.com/brainhubeu/react-carousel/pull/647