Merge pull request #5527 from marmelab/fix-reference-input-sort

Fix useReferenceInputController sorting
marmelab · Nov 13, 2020 · e221bb9 · e221bb9
2 parents 1c85078 + fa72db1
commit e221bb9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 25 deletions.
diff --git a/examples/simple/src/comments/PostReferenceInput.js b/examples/simple/src/comments/PostReferenceInput.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Fragment, useState, useCallback, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { Fragment, useState, useCallback } from 'react';
 import { FormSpy, useForm } from 'react-final-form';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -10,12 +9,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
 
-import {
-    crudGetMatching,
-    ReferenceInput,
-    SelectInput,
-    useTranslate,
-} from 'react-admin'; // eslint-disable-line import/no-unresolved
+import { ReferenceInput, SelectInput, useTranslate } from 'react-admin'; // eslint-disable-line import/no-unresolved
 
 import PostQuickCreate from './PostQuickCreate';
 import PostPreview from './PostPreview';
@@ -30,26 +24,12 @@ const useStyles = makeStyles({
 const PostReferenceInput = props => {
     const translate = useTranslate();
     const classes = useStyles();
-    const dispatch = useDispatch();
     const { change } = useForm();
 
     const [showCreateDialog, setShowCreateDialog] = useState(false);
     const [showPreviewDialog, setShowPreviewDialog] = useState(false);
     const [newPostId, setNewPostId] = useState('');
-
-    useEffect(() => {
-        //Refresh the choices of the ReferenceInput to ensure our newly created post
-        // always appear, even after selecting another post
-        dispatch(
-            crudGetMatching(
-                'posts',
-                'comments@post_id',
-                { page: 1, perPage: 25 },
-                { field: 'id', order: 'DESC' },
-                {}
-            )
-        );
-    }, [dispatch, newPostId]);
+    const [version, setVersion] = useState(0);
 
     const handleNewClick = useCallback(
         event => {
@@ -79,14 +59,15 @@ const PostReferenceInput = props => {
         post => {
             setShowCreateDialog(false);
             setNewPostId(post.id);
+            setVersion(previous => previous + 1);
             change('post_id', post.id);
         },
         [setShowCreateDialog, setNewPostId, change]
     );
 
     return (
         <Fragment>
-            <ReferenceInput {...props} defaultValue={newPostId}>
+            <ReferenceInput key={version} {...props} defaultValue={newPostId}>
                 <SelectInput optionText="title" />
             </ReferenceInput>
             <Button

diff --git a/packages/ra-core/src/controller/input/useReferenceInputController.ts b/packages/ra-core/src/controller/input/useReferenceInputController.ts
@@ -195,7 +195,7 @@ export const useReferenceInputController = (
             loading: dataStatus.waiting,
             warning: dataStatus.warning,
         },
-        choices: Object.keys(finalData).map(id => finalData[id]),
+        choices: finalIds.map(id => finalData[id]),
         // kept for backwards compatibility
         // @deprecated to be removed in 4.0
         error: dataStatus.error,