v3 Attribute on multiple Instances

[MrMooky]

I've been trying to add a rangeSlider and a rangeInput to the same attribute with instantsearch v3. The slider works fine, but the inputs are not initialised, basically the div stays empty.

When I disable the rangeSlider, the rangeInput shows fine.

So this does not work, it's not even showing any error message.

instantsearch.widgets.rangeSlider({
    container: '#range-g2-t1-v1',
    attribute: 'LAENGE',
    pips: false
}),

instantsearch.widgets.rangeInput({
    container: '#input-g2-t1-v1-i0',
    attribute: 'LAENGE',
    templates: {
        separatorText: '-',
    }
})

Again, when I remove the rangeSlider, the rangeInput works just fine.

How can I apply the same attribute to different instances?

[Haroenv]

I'm not actually seeing this failing: https://codesandbox.io/s/morning-wood-m5vxt

did you do something different than what I tried?

[MrMooky]

I read on multiple places that this was possible, so I'm not surprised it works in your demo. The only difference is that I add the widgets from a function, as the widgets need to be dynamically added.

This works very well, except for this one case where I want to use an attribute twice. The rest is as basic as your example.

// Some other widgets directly in the init function ...

search.addWidget(
    instantsearch.widgets.pagination({
        container: '#finder__pagination',
        showFirst: true,
        showPrevious: false,
        showNext: false,
        showLast: true
    })
);

// Dynamically added widgets from frontend plugin
additionalFinderWidgets(search);

search.start();

[Haroenv]

Can you edit my sandbox to show a simple version of what you're doing? I wonder if calling addWidget after start could cause this behaviour?

[MrMooky]

Same behaviour. Each on it's own works fine, both combined only shows the first: https://codesandbox.io/s/dreamy-shamir-1gqsc?file=/src/app.js

But I just discovered its search.addWidget vs. search.addWidgets. I try to add multiple widgets with search.addWidget, I assume that might cause the problem. Also, in my example I don't provide an array. I'll quickly check this on my live environment.

[MrMooky]

Ah yes! That was the problem. Had to use search.addWidgets([]) instead of search.addWidget(). Thanks for your time and pointing me in the right direction. 🙂

[Haroenv]

Ah yes, that's a common confusing, which is why from the next version onwards we are only accepting addWidgets. It's a good idea for in dev mode adding a warning when the wrong number of widgets is given to a method though