FullPage breaks on re-render due to same number of slides

[fredcorr]

Hi Alvaro,

As I said in the previous post, your API it's really cool and makes thing a lot nicer. The issue I mentioned #148 is fixed, we had to find a workaround but it seems like is working

Now slides are generated dynamically onLoad, every time you click on the filtering choices, the page gets rendered together with fullPage.js. The problem appears when switching from filter to filter and I think I found the source of the issue: the problem is on the number of slides generated. If the slides are different in amount, then everything works, but if the number of slides is the same then it breaks the entire site until I click on a filtering option that has a different amount.

Here is an updated version of my CodeSandBox: https://codesandbox.io/s/sweet-napier-6uyq0

Steps to reproduce it

1. Click on Dry Bar
2. After the page has rendered Click On Beauty
3. As you can see you can't scroll back to the top

I hope you can help me this time

Best F

[alvarotrigo]

Thanks for reporting it! It seems to be caused by these lines in the componentDidUpdate method:

https://github.com/alvarotrigo/react-fullpage/blob/89c507ab7e7206603720c234dd61882589de7bfa/components/ReactFullpage/index.js#L89-L92

Probably a quick hack you can use at the moment is to change the fullpage.js option sectionsColor. Then overwrite the background color with CSS if you need to and apply whatever you want. As long as the sectionsColors array is not the same as in the previous initialisation / DOM, it should cause a re-render.

Probably a solution for these kind of cases could be providing a build method we could call manually when making any changes on the DOM. This would call the destroy and init methods and cause the re-render. What do you think about it @cmswalker, @adhrinae?

[ElliottLandsborough]

@alvarotrigo I tried to fix it like this - which didn't work for me - but it outside my expertise as a JS guy. Do you know if I have missed something out that would make it work?

constructor(props) {
    this._reactFullPage = React.createRef();
}

// reBuilder lets me manually rebuild a ReactFullPage component
// e.g I add a new section or new slides and then run this function afterwards.
reBuilder() {
    this._reactFullPage.current.destroy();
    this._reactFullPage.current.init(this._reactFullPage.current.buildOptions());  
}

render() {
    <ReactFullpage ref={this._reactFullPage} {'... some-more-atts'} />`
}

[alvarotrigo]

Can you provide a codesandbox with an isolated reproduction where we can play with it and see the whole code? Use empty sections and reduce the code to the bare minimum.

[ElliottLandsborough]

I have modified the codesandbox above with a 'rebuild' button that works, however its not an ideal solution - ideally the rebuild would be triggered automatically.

https://codesandbox.io/s/friendly-dirac-0ojt9

[alvarotrigo]

I have modified the codesandbox above with a 'rebuild' button that works,

Are you saying it is now working for you? I though you said it didn't?

I tried to fix it like this - which didn't work for me

[ElliottLandsborough]

Yeah, just to be clear, the destroy and re-initialize method does actually work.

[alvarotrigo]

Sorry for asking again, so what's exactly the issue now?

[ElliottLandsborough]

Same as before, the line that you highlighted is returning void incorrectly

if (sectionCount === newSectionCount && slideCount === newSlideCount) { 

[alvarotrigo]

Yeah so you basically would like it to re-render even when there's the same number of sections/slides right?

I guess it is not easy to detect such change, so probably the best solution is to manually call a build function that forces it.

[ElliottLandsborough]

I've made a really simple pull request to make rebuilding easier.

[alvarotrigo]

Thanks for that! I've commented on it.

[ElliottLandsborough]

^^^ Separate pull request for the slide comparison ^^^