Prevent sort of options in refinementList

Hi. Is it possible to prevent any sort from occurring for the options within a refinementList widget? I know there are multiple sort options available: https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/#widget-param-sortby – but I am trying to prevent any sort of options (list of checkboxes, radio buttons, etc.) – and as a result hopefully maintain focus on element that just received a change event. Thanks in advance for any advice or insight :slight_smile:

Also: is there a way to use the sortBy method when rendering custom refinementList widget via connector?

Hi Bob,
Thanks for reaching out to us.
Actually it’s not happening because of sorting.
When we render refinementList, we update innerHTML of certain elements and it makes the focus disappear. Unfortunately it’s not fixed at the moment, and it’s on our todo list.

You can implement a custom widget which takes care of the dom elements so that it won’t lose focus.
In general, you can use connectRefinementList to implement a custom widget. You can learn more from here.

It is not trivial to diff DOM elements, so I’d recommend you to use libraries like Preact (a lightweight version like React). In this link, my colleague François already implemented an example for custom refinement list (without losing focus) with Preact.

Let me know if it works for you and if you have any question.

1 Like

Going through this right now as well. Would be great to have a prop to pass to the RefinementList to prevent this behavior.

1 Like

Yes, we definitely need to improve the templating and the accessibility.
In the meantime, please try the solution and let us know if it works for you or not. I’m happy to help you!

1 Like

Hi @eunjae.lee – thank you for the reply. The example provided by @francoischalifour (https://codesandbox.io/s/reverent-shaw-7tyve) does indeed work nicely. But I think a lot of folks would like to have the option to not refine the list (using .innerHTML or any method) simply b/c not everyone thinks it’s a great user experience. Since the options are contained within a list and they (can) get re-ordered when refined how should a screen reader handle this? Announce the order of the options each time they change (role="alert" perhaps)? It is awkward (although I’m sure lots of users think it’s an amazing/super-cool feature.)

Algolia is amazing – it truly is lightning fast and capable of so many things right OOB. If the accessibility issues could be addressed then it would make an already great product that much better.

Thank you for the help. Looking forward to seeing this situation improved (w/o the need for user to implement vDom with Preact or something similar) – and the option to disable this feature entirely.

Hi @bob.prokop
Thanks for the advice.
The more we learn about accessibility in web, the more we discover to improve in InstantSearch. Some can be fixed easily by attaching aria- attribute, but some cannot.

I understand accessibility is something that cannot wait, otherwise some users won’t have access to it at all. Please bear with us during the course of improving accessibility. And we’re always happy to receive feedback on which part could be prioritized.


About sortBy, what if you use a key like count or name which won’t likely change the order?

In this example, it’s sorted by count:desc and the order doesn’t change unless you change your search keyword. What do you think?

Hi @eunjae.lee

Thank you for replying. It is good to know that the team will continue to improve the accessibility of InstantSearch!

I did end up using sortBy for now – it does prevent the visual re-ordering. If we have time in the next sprint I am going to look into what it would take for us to implement the Preact method provided by @francoischalifour. Until the issue can be addressed within InstantSearch this is probably the best way to work around it.

Thanks again for this conversation – and to everyone on the team for their work on InstantSearch. I am looking forward to using it for our project(s) and monitoring its level of accessibility.

Hi @eunjae.lee. Has any progress been made on accessibility improvements for instantSearch? Is there a bug tracker we can use to monitor updates/raise issues/etc.? Thank you.

Hi @bob.prokop
I’m sorry but we haven’t progressed in this particular issue yet.
If you don’t mind, can you file an issue at https://github.com/algolia/instantsearch.js?
It’d be more helpful if you address your real life problems there.

Thank you!

1 Like

Hi @eunjae.lee
Done: https://github.com/algolia/instantsearch.js/issues/4499 – thank you again for all your work. We love Algolia and want it to best the best it can be :slight_smile:

Thank you for your kind words and thank you again for being patient with us :slight_smile:

And thank you again for the work to create the issue!
Hope you have a great week :slight_smile: