Sort facet values if they are numbers

packages/volto/news/5864.bugfix

@@ -0,0 +1 @@
+Correctly sort facet values if they are numbers @erral

packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx

@@ -22,6 +22,18 @@ const defaultShowFacet = (index) => {
  : values && Object.keys(values).length > 0;
 };
 
+export const sortFacetChoices = (choices) => {
+ const sorted_choices = choices.sort((a, b) =>
+ typeof a.label === 'string' && typeof b.label === 'string'
+ ? a.label.localeCompare(b.label, 'en', { sensitivity: 'base' })
+ : typeof a.label === 'number' && typeof b.label == 'number'
+ ? a.label - b.label
+ : 0,
+ );
+
+ return sorted_choices;
+};
+
 const Facets = (props) => {
  const [hidden, setHidden] = useState(true);
  const {
@@ -81,9 +93,7 @@ const Facets = (props) => {
  : true,
  );
 
- choices = choices.sort((a, b) =>
- a.label.localeCompare(b.label, 'en', { sensitivity: 'base' }),
- );
+ choices = sortFacetChoices(choices);
 
  const isMulti = facetSettings.multiple;
  const selectedValue = facets[facetSettings?.field?.value];

packages/volto/src/components/manage/Blocks/Search/components/Facets.test.jsx

@@ -0,0 +1,76 @@
+import { sortFacetChoices } from './Facets';
+
+describe('sortFacetChoices', () => {
+ it('sort choices with string labels', () => {
+ const choices = [
+ { label: 'b' },
+ { label: 'd' },
+ { label: 'a' },
+ { label: 'c' },
+ ];
+ const sortedChoices = sortFacetChoices(choices);
+ expect(sortedChoices).toStrictEqual([
+ { label: 'a' },
+ { label: 'b' },
+ { label: 'c' },
+ { label: 'd' },
+ ]);
+ });
+ it('sort choices with string labels with accents (1)', () => {
+ const choices = [
+ { label: 'éventa' },
+ { label: 'portal' },
+ { label: 'newsitem' },
+ { label: 'eventb' },
+ ];
+ const sortedChoices = sortFacetChoices(choices);
+ expect(sortedChoices).toStrictEqual([
+ { label: 'éventa' },
+ { label: 'eventb' },
+ { label: 'newsitem' },
+ { label: 'portal' },
+ ]);
+ });
+
+ it('sort choices with string labels with accents (2)', () => {
+ const choices = [
+ { label: 'eventa' },
+ { label: 'portal' },
+ { label: 'newsitem' },
+ { label: 'éventb' },
+ ];
+ const sortedChoices = sortFacetChoices(choices);
+ expect(sortedChoices).toStrictEqual([
+ { label: 'eventa' },
+ { label: 'éventb' },
+ { label: 'newsitem' },
+ { label: 'portal' },
+ ]);
+ });
+
+ it('sort choices with int labels', () => {
+ const choices = [{ label: 7 }, { label: 3 }, { label: 1 }, { label: 4 }];
+ const sortedChoices = sortFacetChoices(choices);
+ expect(sortedChoices).toStrictEqual([
+ { label: 1 },
+ { label: 3 },
+ { label: 4 },
+ { label: 7 },
+ ]);
+ });
+ it('sort choices with labels of any kind', () => {
+ const choices = [
+ { label: 7 },
+ { label: '1' },
+ { label: 'b' },
+ { label: 5 },
+ ];
+ const sortedChoices = sortFacetChoices(choices);
+ expect(sortedChoices).toStrictEqual([
+ { label: 7 },
+ { label: '1' },
+ { label: 'b' },
+ { label: 5 },
+ ]);
+ });
+});