AutocompleteInput: TypeError: can't access property "record", getChoiceText(...).props is undefined

[soullivaneuh]

I have a custom UserReferenceInput that uses ReferenceInput combined with AutocompleteInput.

Since last update, the choice list displays [object Object] instead of the expected name, and selecting one of the choices cause a crash with the following error:

TypeError: can't access property "record", getChoiceText(...).props is undefined

Stack trace

AutocompleteInput@http://localhost:4000/static/js/vendors~main.chunk.js:314286:20
ListContextProvider@http://localhost:4000/static/js/vendors~main.chunk.js:277749:15
ResourceContextProvider@http://localhost:4000/static/js/vendors~main.chunk.js:285064:18
ReferenceInputView@http://localhost:4000/static/js/vendors~main.chunk.js:317957:20
ReferenceInput@http://localhost:4000/static/js/vendors~main.chunk.js:317875:16
UserReferenceInput@http://localhost:4000/static/js/main.chunk.js:18313:7
div
FilterFormInput@http://localhost:4000/static/js/vendors~main.chunk.js:327226:23
form
FilterForm@http://localhost:4000/static/js/vendors~main.chunk.js:326999:12
ReactFinalForm@http://localhost:4000/static/js/vendors~main.chunk.js:359919:15
EnhancedFilterForm@http://localhost:4000/static/js/vendors~main.chunk.js:327128:25
Filter@http://localhost:4000/static/js/vendors~main.chunk.js:326661:26
RideFilter
div
Toolbar@http://localhost:4000/static/js/vendors~main.chunk.js:34842:17
WithStyles@http://localhost:4000/static/js/vendors~main.chunk.js:187451:25
ListToolbar@http://localhost:4000/static/js/vendors~main.chunk.js:324079:25
div
ListView@http://localhost:4000/static/js/vendors~main.chunk.js:324179:17
ListContextProvider@http://localhost:4000/static/js/vendors~main.chunk.js:277749:15
List@http://localhost:4000/static/js/vendors~main.chunk.js:323719:79
RideList
WithPermissions@http://localhost:4000/static/js/vendors~main.chunk.js:276079:20
Route@http://localhost:4000/static/js/vendors~main.chunk.js:364082:29
Switch@http://localhost:4000/static/js/vendors~main.chunk.js:364284:29
ResourceContextProvider@http://localhost:4000/static/js/vendors~main.chunk.js:285064:18
ResourceRoutes@http://localhost:4000/static/js/vendors~main.chunk.js:284930:14
Resource@http://localhost:4000/static/js/vendors~main.chunk.js:285002:12
Route@http://localhost:4000/static/js/vendors~main.chunk.js:364082:29
Switch@http://localhost:4000/static/js/vendors~main.chunk.js:364284:29
RoutesWithLayout@http://localhost:4000/static/js/vendors~main.chunk.js:285191:18
div
main
div
div
LayoutWithoutTheme@http://localhost:4000/static/js/vendors~main.chunk.js:321310:24
WithStyles@http://localhost:4000/static/js/vendors~main.chunk.js:187451:25
C@http://localhost:4000/static/js/vendors~main.chunk.js:364339:31
ConnectFunction@http://localhost:4000/static/js/vendors~main.chunk.js:361131:75
ThemeProvider@http://localhost:4000/static/js/vendors~main.chunk.js:186153:18
Layout@http://localhost:4000/static/js/vendors~main.chunk.js:321428:23
Route@http://localhost:4000/static/js/vendors~main.chunk.js:364082:29
Switch@http://localhost:4000/static/js/vendors~main.chunk.js:364284:29
div
CoreAdminRouter@http://localhost:4000/static/js/vendors~main.chunk.js:284566:87
Route@http://localhost:4000/static/js/vendors~main.chunk.js:364082:29
Switch@http://localhost:4000/static/js/vendors~main.chunk.js:364284:29
CoreAdminUI@http://localhost:4000/static/js/vendors~main.chunk.js:284782:12
AdminUI
Router@http://localhost:4000/static/js/vendors~main.chunk.js:363713:30
ConnectedRouter@http://localhost:4000/static/js/vendors~main.chunk.js:212202:22
ConnectedRouterWithContext@http://localhost:4000/static/js/vendors~main.chunk.js:212325:19
ConnectFunction@http://localhost:4000/static/js/vendors~main.chunk.js:361131:75
TranslationProvider@http://localhost:4000/static/js/vendors~main.chunk.js:293596:22
Provider@http://localhost:4000/static/js/vendors~main.chunk.js:360842:15
CoreAdminContext@http://localhost:4000/static/js/vendors~main.chunk.js:284329:22
AdminContext
Admin@http://localhost:4000/static/js/vendors~main.chunk.js:328616:19
MuiPickersUtilsProvider@http://localhost:4000/static/js/vendors~main.chunk.js:185781:15
./src/index.tsx/</_c<@http://localhost:4000/static/js/main.chunk.js:3333:98
Profiler@http://localhost:4000/static/js/vendors~main.chunk.js:199935:24
profiler(unknown)

Related code:

import React, {
  FC,
} from 'react';
import {
  AutocompleteArrayInput,
  AutocompleteInput,
  AutocompleteInputProps,
  ReferenceArrayInput,
  ReferenceInput,
} from 'react-admin';
import {
  ReferenceInputProps,
} from 'ra-ui-materialui/lib/input/ReferenceInput';
import {
  UserIdentityField,
} from './UserIdentityField';
import {
  UserRecord,
} from '../../../types';

interface UserReferenceInputProps extends Omit<ReferenceInputProps, 'reference'> {
  label?: string;
  isDriver?: boolean;
  fullWidth?: AutocompleteInputProps['fullWidth'],
}

const autocompleteDefaultOptions: Partial<AutocompleteInputProps> = {
  // eslint-disable-next-line react/display-name
  optionText: (choice?: UserRecord) => {
    if (!choice?.id) {
      return 'Inconnu.';
    }

    return <UserIdentityField record={choice} />;
  },
  inputText: (choice: UserRecord) => choice?.name || '',
  matchSuggestion: (_: string, choice: UserRecord) => Boolean(choice?.name),
};

const filterToQuery = (isDriver?: boolean) => (filter: string) => ({
  $search: filter,
  ...isDriver ? { isDriver: true } : {},
});

export const UserReferenceInput: FC<UserReferenceInputProps> = ({
  source,
  label,
  isDriver,
  fullWidth,
  ...props
}) => (
  <ReferenceInput
    source={source}
    label={label}
    reference="users"
    filterToQuery={filterToQuery(isDriver)}
    {...props}
  >
    <AutocompleteInput
      {...autocompleteDefaultOptions}
      fullWidth={fullWidth}
      resettable
    />
  </ReferenceInput>
);
UserReferenceInput.defaultProps = {
  label: 'Utilisateur',
};

export const UserReferenceArrayInput: FC<UserReferenceInputProps> = ({
  source,
  label,
  isDriver,
  fullWidth,
  ...props
}) => (
  <ReferenceArrayInput
    source={source}
    label={label}
    reference="users"
    filterToQuery={filterToQuery(isDriver)}
    {...props}
  >
    <AutocompleteArrayInput
      {...autocompleteDefaultOptions}
      fullWidth={fullWidth}
    />
  </ReferenceArrayInput>
);
UserReferenceArrayInput.defaultProps = {
  label: 'Utilisateurs',
};

export default null;

Other information:

I bisected between the releases, and it looks the bug was introduced in v3.19.8.

Environment

• React-admin version: 3.19.8 (same behavior on latest 3.19.10)
• Last version that did not exhibit the issue (if applicable): 3.19.7
• React version: 17.0.2
• Browser: Chrome
• Stack trace (in case of a JS error): See collapsed details.

[soullivaneuh]

In order to simplify the report, I remove the custom UserIdentityField usage:

diff --git a/src/resources/users/components/UserReferenceInput.tsx b/src/resources/users/components/UserReferenceInput.tsx
index 53dd712..88e8f79 100644
--- a/src/resources/users/components/UserReferenceInput.tsx
+++ b/src/resources/users/components/UserReferenceInput.tsx
@@ -11,9 +11,6 @@ import {
 import {
   ReferenceInputProps,
 } from 'ra-ui-materialui/lib/input/ReferenceInput';
-import {
-  UserIdentityField,
-} from './UserIdentityField';
 import {
   UserRecord,
 } from '../../../types';
@@ -31,7 +28,7 @@ const autocompleteDefaultOptions: Partial<AutocompleteInputProps> = {
       return 'Inconnu.';
     }
 
-    return <UserIdentityField record={choice} />;
+    return choice.id.toString();
   },
   inputText: (choice: UserRecord) => choice?.name || '',
   matchSuggestion: (_: string, choice: UserRecord) => Boolean(choice?.name),

It "solves" the [object Object] issue by showing the IDs instead. However the crash on selection is still present.

[soullivaneuh]

Removing the inputText option solve the selection crash:

diff --git a/src/resources/users/components/UserReferenceInput.tsx b/src/resources/users/components/UserReferenceInput.tsx
index 53dd712..489ace2 100644
--- a/src/resources/users/components/UserReferenceInput.tsx
+++ b/src/resources/users/components/UserReferenceInput.tsx
@@ -33,7 +33,6 @@ const autocompleteDefaultOptions: Partial<AutocompleteInputProps> = {
 
     return <UserIdentityField record={choice} />;
   },
-  inputText: (choice: UserRecord) => choice?.name || '',
   matchSuggestion: (_: string, choice: UserRecord) => Boolean(choice?.name),
 };

However, I still have the [object Object] display issue with the custom UserIdentityField. Here is its content:

import React, {
  VFC,
} from 'react';
import {
  Typography,
  makeStyles,
} from '@material-ui/core';
import {
  FieldProps,
} from 'ra-ui-materialui';
import {
  UserRecord,
} from '../../../types';
import {
  UserAvatar,
} from './UserAvatar';

const useStyles = makeStyles((theme) => {
  const avatarSize = theme.spacing(3);

  return {
    root: {
      display: 'flex',
      flexWrap: 'nowrap',
      alignItems: 'center',
    },
    avatar: {
      marginRight: theme.spacing(1),
      marginTop: -theme.spacing(0.5),
      marginBottom: -theme.spacing(0.5),
      width: avatarSize,
      height: avatarSize,
    },
  };
});

export const UserIdentityField: VFC<FieldProps<UserRecord>> = ({
  record,
}) => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <UserAvatar
        user={record}
        className={classes.avatar}
      />
      <Typography variant="body2" component="span">
        {record?.name || 'Anonyme'}
      </Typography>
    </div>
  );
};
UserIdentityField.defaultProps = {
  addLabel: true,
  label: 'Identité',
};

export default null;

[WiXSL]

Thanks for reporting this. Please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).

[JinParc]

Hello @WiXSL, I'm working on the same project with @soullivaneuh
I reproduced a sample application occurs that issue, please check the link
Github Link : https://github.com/Seojun-Park/react-admin/tree/autocompleteInput-issue
CodeSandbox : https://codesandbox.io/s/bold-monad-yfsmcj

[WiXSL]

@seojun-park,
I don't see a TypeScript error in the code-sandbox. Plus, I tried your component, and it seems to work.
Could you explain what errors are you seeing and how to reproduce them with your code-sandbox?

[JinParc]

@WiXSL
You can produce the error by clicking a Input with label of Author.

Maybe It'd be better link to see the code. please check https://codesandbox.io/s/bold-monad-yfsmcj?file=/src/posts/PostList.tsx

As you can see the image below, The contents of AutocompleteInput is showed [object, Object]

And when I clicked a one content the page shows this :

at line 35 on the code-sandbox link you would see :

const PostFilter: React.FC<Omit<FilterProps, 'children'>> = (props) => (
    <Filter {...props}>
      <SearchInput source="$search" alwaysOn />
      <UserReferenceInput
        source="user_id"
        label="Author"
        alwaysOn
      />
    </Filter>
  );

[WiXSL]

Ok, let me check. Thanks

[WiXSL]

I can reproduce this with other versions as well, Is not something of the latest version.

[JinParc]

Could you reproduce that then please?

How version difference?

our environment is

• React-admin version: 3.19.8 (same behaviour on latest 3.19.10)
• Last version that did not exhibit the issue (if applicable): 3.19.7
• React version: 17.0.2

[WiXSL]

Yes, I'm looking into it