fix: change FieldGuesser key in ListGuesser when orderField is updated (#446)

This fix is needed to force the DatagridHeaderCell to render again when
the order field is resolved and to enable sorting for the column

Author: alanpoulain

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.1
+
+* Make sure columns can be sorted when there is an order filter in `ListGuesser`
+
 ## 3.0.0
 
 * Compatibility with react-admin 4 (see UPGRADE.md)

src/ListGuesser.tsx

@@ -77,7 +77,9 @@ export const IntrospectedListGuesser = ({
   ...props
 }: IntrospectedListGuesserProps) => {
   const { hasShow, hasEdit } = useResourceDefinition(props);
-  const [orderParameters, setOrderParameters] = useState<string[]>([]);
+  const [orderParameters, setOrderParameters] = useState<
+    string[] | undefined
+  >();
 
   useEffect(() => {
     if (schema) {
@@ -90,21 +92,23 @@ export const IntrospectedListGuesser = ({
   let fieldChildren = children;
   if (!fieldChildren) {
     fieldChildren = readableFields.map((field) => {
-      const orderField = orderParameters.find(
+      const orderField = (orderParameters ?? []).find(
         (orderParameter) => orderParameter.split('.')[0] === field.name,
       );
 
       return (
         <FieldGuesser
-          key={field.name}
+          key={field.name + (orderField ? `-${orderField}` : '')}
           source={field.name}
           sortable={!!orderField}
           sortBy={orderField}
           resource={props.resource}
         />
       );
     });
-    displayOverrideCode(schema, readableFields);
+    if (orderParameters !== undefined) {
+      displayOverrideCode(schema, readableFields);
+    }
   }
 
   return (
@@ -150,7 +154,7 @@ const ListGuesser = ({
 /* eslint-disable tree-shaking/no-side-effects-in-initialization */
 ListGuesser.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  resource: PropTypes.string.isRequired,
+  resource: PropTypes.string,
   filters: PropTypes.element,
   hasShow: PropTypes.bool,
   hasEdit: PropTypes.bool,