Instantsearch.js: v2 rangeSlider/Rheostat: flattenChildren warnings

[timkelty]

Bug: What is the current behavior?
Thousands of warnings is js console. On initial load and with every adjustment to a slider:

warning.js:36 Warning: flattenChildren(...): Encountered two children with the same key, `3:$0.00001`. Child keys must be unique; when two children share a key, only the first child will be used.
    in div (created by Rheostat)
    in Rheostat (created by Slider)
    in Slider (created by Slider-HeaderFooter)
    in div (created by Slider-HeaderFooter)
    in div (created by Slider-HeaderFooter)
    in Slider-HeaderFooter (created by HeaderFooter-AutoHide)
    in div (created by HeaderFooter-AutoHide)
    in HeaderFooter-AutoHide

What is the version you are using? Always use the latest one before opening a bug issue.
v2.0.0-beta.2

[bobylito]

Thanks for the report 🙌 . We're working on making sure that we have no warning for the final release.

[bobylito]

Can you provide a reproducible case using a jsFiddle @timkelty ? I'm not sure I've seen this warning before.

[iam4x]

This is from preact + rheostat @bobylito we should fix that on rheostat itself. Will drop a PR and use the fork for next beta 👍

[timkelty]

Can you provide a reproducible case using a jsFiddle @timkelty ? I'm not sure I've seen this warning before.

Working on it. It seems somewhat specific to my index + accompanying widgets, so I'm trying to narrow it down.

[timkelty]

@bobylito @iam4x here's a jsFiddle of what triggers the warnings in my build: https://jsfiddle.net/timkelty/vt4zvj9g/

Interesting bits:

• Warnings aren't triggered on jsFiddle, but are with the same code locally ([email protected]).
• Only seems to happen when no values are present for the given attributeName (when widget would be hidden if autoHideContainer: true). To illustrate this, comment out the 'productType.name': ['Kayak'] part of the search configuration.

So - it seems that it might be related to Rheostat not having an upper bound? I add autoHideContainer: false, and you can see it render with a 0 on the lower, and nothing at the top.

[iam4x]

Thank's for the debugging and the reprocase @timkelty we will fix it for next beta 👍

[iam4x]

This is issue is really similar as the one we had with the old slider (https://github.com/algolia/instantsearch.js/pull/2041) I will go for the same behaviour, disable the slider when min === max.

Also @timkelty I cannot reproduce the warnings into the console, tried on my side into a dev env with webpack and the exactly same code you put jsfiddle.

[timkelty]

@iam4x Here it is, in the flesh (I built in dev env): https://paddling.fusionarydev.com/gear/category/kayaks/recreational/

[iam4x]

Thanks, I see you have multiple rangeSlider, it might be related to that. Working on trying to reproduce.

[timkelty]

@iam4x I did try and reduce it down to 1 (in fact that was the only widget) and still got the warnings.

[iam4x]

Okey, that is weird. I've published a new version v2.0.0-beta.4 with the potential fix and the fix for https://github.com/algolia/instantsearch.js/issues/2162

Can you try it and reach me back? Thanks.

[timkelty]

@iam4x no flattenChildren warnings in v2.0.0-beta.4, Thanks!

[Haroenv]

That's awesome!

Have a great day!

[iam4x]

This is good news :) I'll close the issue, feel free to open new one if you have any other issues with the v2.

And again, thanks a lot for thw feedback!