Resizing height issue #521

[paulathevalley]

Description

This PR addresses this resizing height issue documented from the README:

Resizing Height Issue

When using dynamic content in a slide such as text, you may see an issue with resizing the height of the component when loading in an iframe, or forcing the component to load synchronously after another component such as a loading screen, or interstitial.

How resizing works

In componentDidMount, the initial dimensions are assigned to each slide:

• Width: initialSlidewidth || slideWidth || (slidesToShow / width of container)
• Height: initialSlideHeight

Once the component has completed mounting with the accurate width, it waits for the readyStateChange event to fire before measuring the desired height of the content (current, first, max). That measurement then replaces initialSlideHeight with the measured height in pixels.

If the readyStateChange event fires before the component completes mounting, the height of the component is not measured until a resize event or a change in slide is triggered.

It does so by tracking the readystatechange listener in addition to whether the component is mounted (through this.mounted). If both are true, and there is a mismatch in the height, then componentDidUpdate will run again, and the Carousel will recalculate the height and width.

I think this solution gets at the symptoms rather than the underlying issue, which is an ordering problem with two events that.. as far as I’m aware, are outside our control. I would like to spend more time on a more elegant solution, but this may suffice for fixing bugs in the meantime.

Fixes #521

Type of Change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• This change requires a documentation update

How Has This Been Tested?

I was having trouble reproducing the issue locally, but I was able to reproduce it consistently by commenting out this.setDimensions() in onReadyStateChange().

Checklist: (Feel free to delete this section upon completion)

• I have added tests that prove my fix is effective or that my feature works

[jflayhart]

I think there should at least be a helpful disclaimer explaining if setDimensions is run before, let's say, an image loads, then the slide height is not measured again until a subsequent resize event occurs. I have run into this issue before and found a hard workaround, unless this PR truly fixes that issue.

For example, I currently must to do something like this with React refs in my codebase, otherwise the image is completely cut off:

<img onLoad={this.carouselRef.setDimensions()} />

[paulathevalley]

That was the intent of this PR! I did my best to reproduce the issue, but I am not certain if it was sufficient. Did you find any differently?

[jflayhart]

Nice! @paulathevalley Let me get back to you on this, sorry for the delay. I'll update to latest version and see if your PR fixes issue. Will provide screenshots.

[jflayhart]

@paulathevalley @sarmeyer Still an issue D:

[paulathevalley]

noooo!! Do you have more details on how you reproduced it? Were you able to reproduce it locally consistently? I would love to understand more clearly.