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

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

Open eikawata opened this issue 8 months ago • 1 comments

Prerequisite Done!

Describe the bug

  • When the infinite mode is off and the carousel is not in the first slide (i.e. the next arrow was pressed at least once), then the width of the cards are not updated until componentDidUpdate of Carousel.js runs.
  • The width of the card is updated properly when the carousel is at the beginning of the slide.
  • If the carousel is at the last slide, the update of card widths are very weird.

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 avatar Jun 28 '24 08:06 eikawata