react-multi-carousel
react-multi-carousel copied to clipboard
When the `infinite` mode is off, the cards are not resized until `componentDidUpdate` runs
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 untilcomponentDidUpdate
ofCarousel.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:
- Go to the Storybook.
- Select "Without infinite mode".
- Move to the next step. (This is important since the bug does not happen when you are at the beginning of the carousel.)
- 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.
This does not happen when the infinite
mode is on.
When the carousel is at the end of the slides, then updating the card widths looks completely broken.
Additional context
This is where the problem is in the code. The shouldCorrectItemPosition
is always false unless the infinite
option is true.
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".