YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.28k stars 289 forks source link

When the `infinite` mode is off, the cards are not resized until `componentDidUpdate` runs #439

Open eikawata opened 3 months ago

eikawata commented 3 months ago

Prerequisite Done!

Describe the bug

To Reproduce Steps to reproduce the behavior:

  1. Go to the Storybook.
  2. Select "Without infinite mode".
  3. Move to the next step. (This is important since the bug does not happen when you are at the beginning of the carousel.)
  4. Resize the window

Expected behavior The width of the cards are all update as the window is resized.

Screenshots The width of the cards are updated correctly only after a short delay. It suddenly "snaps" into the correct width which looks very weird. menubar

This does not happen when the infinite mode is on. infinite

When the carousel is at the end of the slides, then updating the card widths looks completely broken. bug

Additional context This is where the problem is in the code. The shouldCorrectItemPosition is always false unless the infinite option is true.

Carousel.js

  public onResize(value?: React.KeyboardEvent | boolean): void {
    // value here can be html event or a boolean.
    // if its in infinite mode, we want to keep the current slide index no matter what.
    // if its not infinite mode, keeping the current slide index has already been taken care of
    const { infinite } = this.props;
    let shouldCorrectItemPosition;
    if (!infinite) {
      shouldCorrectItemPosition = false;
    } else {
      if (typeof value === "boolean" && value) {
        shouldCorrectItemPosition = false;
      } else {
        shouldCorrectItemPosition = true;
      }
    }
    this.setItemsToShow(shouldCorrectItemPosition);
  }

Shouldn't we always do the resize regardless of the infinite?

Reproduction This can be reproduced in the Storybook's "Without infinite mode".

eikawata commented 3 months ago

I'm not sure how problematic to always set shouldCorrectItemPosition to true by default since the comment mentions that it is "already taken care of". But, in that case, could we expose a new option which always sets it to true? That would be a safer fix.

I'm probably willing to make a pull request, so please let me know.