react-carousel icon indicating copy to clipboard operation
react-carousel copied to clipboard

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

Open AdrielD opened this issue 5 years ago • 2 comments

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

AdrielD avatar Sep 24 '20 20:09 AdrielD

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 avatar Sep 26 '20 19:09 ishan28mkip

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

ishan28mkip avatar Sep 27 '20 01:09 ishan28mkip