From d5eddeae2476c376c8e393542c6ceb929db584fc Mon Sep 17 00:00:00 2001
From: Maxime-J <Maxime-J@users.noreply.github.com>
Date: Fri, 3 Nov 2023 11:53:23 +0000
Subject: [PATCH 1/2] sort formatted filter values

---
 .../(main)/reports/[id]/FieldFilterForm.js    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/reports/[id]/FieldFilterForm.js b/src/app/(main)/reports/[id]/FieldFilterForm.js
index 96ac06b0..dd889fc8 100644
--- a/src/app/(main)/reports/[id]/FieldFilterForm.js
+++ b/src/app/(main)/reports/[id]/FieldFilterForm.js
@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
-import { useMessages, useFilters, useFormat } from 'components/hooks';
+import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
 import styles from './FieldFilterForm.module.css';
 
 export default function FieldFilterForm({
@@ -16,14 +16,26 @@ export default function FieldFilterForm({
   const [value, setValue] = useState();
   const { getFilters } = useFilters();
   const { formatValue } = useFormat();
+  const { locale } = useLocale();
   const filters = getFilters(type);
 
+  const formattedValues = useMemo(() => {
+    const formatted = {};
+    const { compare } = new Intl.Collator(locale, { numeric: true });
+    const format = val => {
+      formatted[val] = formatValue(val, name);
+      return formatted[val];
+    };
+    values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
+    return formatted;
+  }, [values]);
+
   const renderFilterValue = value => {
     return filters.find(f => f.value === value)?.label;
   };
 
   const renderValue = value => {
-    return formatValue(value, name);
+    return formattedValues[value];
   };
 
   const handleAdd = () => {
@@ -59,7 +71,7 @@ export default function FieldFilterForm({
             }}
           >
             {value => {
-              return <Item key={value}>{formatValue(value, name)}</Item>;
+              return <Item key={value}>{formattedValues[value]}</Item>;
             }}
           </Dropdown>
         </Flexbox>

From f01697018611056ecf8934c7c33a97d79f4b3424 Mon Sep 17 00:00:00 2001
From: Maxime-J <Maxime-J@users.noreply.github.com>
Date: Sun, 5 Nov 2023 17:11:50 +0000
Subject: [PATCH 2/2] fix single filter value

---
 src/app/(main)/reports/[id]/FieldFilterForm.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/reports/[id]/FieldFilterForm.js b/src/app/(main)/reports/[id]/FieldFilterForm.js
index dd889fc8..ea80f82a 100644
--- a/src/app/(main)/reports/[id]/FieldFilterForm.js
+++ b/src/app/(main)/reports/[id]/FieldFilterForm.js
@@ -21,12 +21,16 @@ export default function FieldFilterForm({
 
   const formattedValues = useMemo(() => {
     const formatted = {};
-    const { compare } = new Intl.Collator(locale, { numeric: true });
     const format = val => {
       formatted[val] = formatValue(val, name);
       return formatted[val];
     };
-    values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
+    if (values.length !== 1) {
+      const { compare } = new Intl.Collator(locale, { numeric: true });
+      values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b)));
+    } else {
+      format(values[0]);
+    }
     return formatted;
   }, [values]);