Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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