Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
eikawata opened this issue Jun 28, 2024 · 1 comment

Comments

@eikawata
Copy link

eikawata commented Jun 28, 2024

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant