appbaseio
When using two DynamicRangeSlider, each DynamicRangeSlider reacts to itself, blocking off "going back" on a selection
Affected Projects React "@appbaseio/reactivesearch": "^3.8"
Library Version: x.y.z 3.8
Describe the bug When the page has 2 (or more) DynamicRangeSlider, then when using any one of them, the low/high points of the slider you're using moves, even though the element itself does not have 'react to' itself.
To Reproduce It's a large project, so hard to get a snipped to reproduce, but I made a video.
Expected behavior That when I change the price slider, the low (or high) end stays put.
Screenshots The first part, I show with only price as a slider, and it works nicely, in the second part I show "loadIndex" also being a slider, and then price changes itself when edited: https://youtu.be/yz1E0J69Mac
Desktop (please complete the following information):
- OS: MacOS Catalina
- Browser Chrome
- Version Version 80.0.3987.100 (Official Build) (64-bit)
I do notice that it stops moving after a certain point though. https://i.imgur.com/wdqX4qH.png
But that's if I stick to the "mid-level". If I push it further, then it changes again: https://i.imgur.com/1FEownQ.png
Another thing, when I tried using "LoadIndex", it got stuck, and in the console I got this message a couple of hundred times: https://gist.github.com/trafficfox/7810638148005fec328020239bda95c9
And LoadIndex got stuck like this: https://i.imgur.com/4xdkF37.png
Another update. It seems that when I have one DynamicRangeSlider, and I click on any other option - then that option itself "locks itself up".
So the first example here, is shown without the slider, in which the brand doesn't "lock up". Then the second, it does lock up. But it didn't lock up right away though, only on the second try. But after it locked up, even after I removed the selection, the other options didn't come back up again.
https://youtu.be/fd-079RKoC8
Sorry for the spam, but I've been trying to debug it for a while now. Look here: https://youtu.be/NK_ea0Geo0k CB, the bars still show, and the filter still has the lower end, UNTIL I put the slider past the last vertical bar.
@trafficfox thanks for reporting. Can you share how you're using DynamicRangeSlider in the code? Example:
<DynamicRangeSlider
dataField="books_count"
componentId="BookSensor"
rangeLabels={(min, max) => ({
start: `${min} book`,
end: `${max} books`,
})}
/>
I'm using it without any additional parameters. If you're available at a same time I am, I can put it on the site so you can see for yourself
I'm using it without any additional parameters. If you're available at a same time I am, I can put it on the site so you can see for yourself
@trafficfox yes, please do it.
So the same exact parameters I had didn't cause the error, but different do now. See here: https://felgoutlet.trafficfox.no/produkt-kategori/dekk/ Width is what causes it to break now. And it happens when you scroll the left bar past the last vertical bar.
@trafficfox can you once check whether the fields are indexed properly and have proper types? I'm seeing some errors in the console.
Check this: 
I removed the offending fields and the errors are gone, but try AspectRatio, moving the right "ball" left, and it "blocks itself". Moving the left one right, throws this in the console:
DynamicRangeSlider.js:177 stepValue for DynamicRangeSlider aspectRatio should be greater than 0 and less than or equal to 0
As for the correct data, on Dejavu you can view it with: URL: felgoutlet_trafficfox_no_products Index: felgoutlet_trafficfox_no_products
@trafficfox is it possible to create a minimal reproducible example? Debugging this way is like hitting a bull's eye.
I tried removing diameter and price (separately), and then it works. So it seems that the minimum condition for it to break is this order.
Here is the App.js main file, since I create the filters from an object: https://gist.github.com/trafficfox/f2c61a7c9d086124533f434bfff27b3c