[refinementList]: sortBy does not correctly sort UTF8 chars

When using the the name sorting (or keeping the default one), facets starting with an accented character are put at the end.

Instead of the default sorting on strings, we could use localeCompare. It needs to know the user locale, but this is already an information we can pass to the main instance (to specify how to format numbers), so we could re-use it here as well.

It will require a change in the Helper as well I guess.

[pixelastic]

Seems there is no way to pass a custom sort function to sortBy. What can be done though, is use a normalized string through _.deburr.

Something like

var facets = _.sortBy(facetValues, (facet) => { return _.deburr(facet.name) });

This will convert Éric to Eric before applying the sort. Not perfect, but closer to what we want to achieve here.

[Haroenv]

You can use the sortBy argument to pass a regular JS sort function to override the sorting behaviour.

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#brand-list',
    attributeName: 'brand',
    sortBy({ name: a }, { name: b }) {
      return a.localeCompare(b);
    },
  })
);

https://codesandbox.io/s/713rl3zwzq

Sorting can also be done in transformItems if you so prefer.