diff --git a/packages/volto/news/5864.bugfix b/packages/volto/news/5864.bugfix new file mode 100644 index 0000000000..b38adf55a6 --- /dev/null +++ b/packages/volto/news/5864.bugfix @@ -0,0 +1 @@ +Correctly sort facet values if they are numbers @erral diff --git a/packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx b/packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx index 28ecc0c636..2995896a10 100644 --- a/packages/volto/src/components/manage/Blocks/Search/components/Facets.jsx +++ b/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]; diff --git a/packages/volto/src/components/manage/Blocks/Search/components/Facets.test.jsx b/packages/volto/src/components/manage/Blocks/Search/components/Facets.test.jsx new file mode 100644 index 0000000000..7ff7067300 --- /dev/null +++ b/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 }, + ]); + }); +});