Fix ignored inputRef in AutocompleteInput & AutocompleteArrayInput

examples/simple/src/comments/CommentEdit.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
     Card,
     Typography,
@@ -8,7 +9,6 @@ import {
     Button,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import * as React from 'react';
 import {
     AutocompleteInput,
     DateInput,
@@ -114,6 +114,7 @@ const CommentEdit = props => {
         basePath,
         version,
     } = controllerProps;
+
     return (
         <EditContextProvider value={controllerProps}>
             <div className="edit-page">
@@ -154,7 +155,9 @@ const CommentEdit = props => {
                                     ) => true}
                                     optionText={<OptionRenderer />}
                                     inputText={inputText}
-                                    options={{ fullWidth: true }}
+                                    options={{
+                                        fullWidth: true,
+                                    }}
                                 />
                             </ReferenceInput>
 

packages/ra-core/src/util/index.ts

@@ -13,6 +13,7 @@ import useWhyDidYouUpdate from './useWhyDidYouUpdate';
 import { useSafeSetState, useTimeout } from './hooks';
 import { getMutationMode } from './getMutationMode';
 export * from './indexById';
+export * from './mergeRefs';
 
 export {
     escapePath,

packages/ra-core/src/util/mergeRefs.ts

@@ -0,0 +1,16 @@
+import { LegacyRef, MutableRefObject, RefCallback } from 'react';
+
+// https://github.com/gregberge/react-merge-refs
+export function mergeRefs<T = any>(
+    refs: Array<MutableRefObject<T> | LegacyRef<T>>
+): RefCallback<T> {
+    return value => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(value);
+            } else if (ref != null) {
+                (ref as React.MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+}

packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx

@@ -8,7 +8,7 @@ import React, {
 import Downshift, { DownshiftProps } from 'downshift';
 import classNames from 'classnames';
 import get from 'lodash/get';
-import { TextField, Chip } from '@material-ui/core';
+import { TextField, Chip, InputProps } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import {
@@ -17,6 +17,7 @@ import {
     ChoicesInputProps,
     useSuggestions,
     warning,
+    mergeRefs,
 } from 'ra-core';
 import debounce from 'lodash/debounce';
 
@@ -367,6 +368,8 @@ const AutocompleteArrayInput = (props: AutocompleteArrayInputProps) => {
         return true;
     };
 
+    const { inputRef, ...InputPropsWithoutInputRef } = InputProps || {};
+
     return (
         <>
             <Downshift
@@ -414,7 +417,10 @@ const AutocompleteArrayInput = (props: AutocompleteArrayInputProps) => {
                                 id={id}
                                 fullWidth={fullWidth}
                                 InputProps={{
-                                    inputRef: storeInputRef,
+                                    inputRef: mergeRefs([
+                                        storeInputRef,
+                                        inputRef,
+                                    ]),
                                     classes: {
                                         root: classNames(classes.inputRoot, {
                                             [classes.inputRootFilled]:
@@ -461,6 +467,7 @@ const AutocompleteArrayInput = (props: AutocompleteArrayInputProps) => {
                                         );
                                     },
                                     onFocus,
+                                    ...InputPropsWithoutInputRef,
                                 }}
                                 error={!!(touched && (error || submitError))}
                                 label={
@@ -580,13 +587,16 @@ const useStyles = makeStyles(
 const DefaultSetFilter = () => {};
 
 interface Options {
-    suggestionsContainerProps?: any;
+    InputProps?: InputProps;
     labelProps?: any;
+    suggestionsContainerProps?: any;
 }
 
 export interface AutocompleteArrayInputProps
-    extends ChoicesInputProps<TextFieldProps & Options>,
+    extends ChoicesInputProps<TextFieldProps>,
         Omit<SupportCreateSuggestionOptions, 'handleChange'>,
-        Omit<DownshiftProps<any>, 'onChange'> {}
+        Omit<DownshiftProps<any>, 'onChange'> {
+    options?: Options;
+}
 
 export default AutocompleteArrayInput;

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -9,14 +9,20 @@ import React, {
 import Downshift, { DownshiftProps } from 'downshift';
 import get from 'lodash/get';
 import classNames from 'classnames';
-import { TextField, InputAdornment, IconButton } from '@material-ui/core';
+import {
+    TextField,
+    InputAdornment,
+    IconButton,
+    InputProps,
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import ClearIcon from '@material-ui/icons/Clear';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import {
     useInput,
     FieldTitle,
     ChoicesInputProps,
+    mergeRefs,
     useSuggestions,
     useTranslate,
     warning,
@@ -364,7 +370,8 @@ export const AutocompleteInput = (props: AutocompleteInputProps) => {
         return true;
     };
 
-    const { endAdornment, ...InputPropsWithoutEndAdornment } = InputProps || {};
+    const { endAdornment, inputRef, ...InputPropsWithoutEndAdornment } =
+        InputProps || {};
 
     const handleClickClearButton = useCallback(
         openMenu => event => {
@@ -494,7 +501,10 @@ export const AutocompleteInput = (props: AutocompleteInputProps) => {
                                 id={id}
                                 name={input.name}
                                 InputProps={{
-                                    inputRef: storeInputRef,
+                                    inputRef: mergeRefs([
+                                        storeInputRef,
+                                        inputRef,
+                                    ]),
                                     endAdornment: getEndAdornment(openMenu),
                                     onBlur,
                                     onChange: event => {
@@ -623,16 +633,18 @@ const useStyles = makeStyles(
 );
 
 interface Options {
-    suggestionsContainerProps?: any;
+    InputProps?: InputProps;
     labelProps?: any;
+    suggestionsContainerProps?: any;
 }
 
 export interface AutocompleteInputProps
-    extends ChoicesInputProps<TextFieldProps & Options>,
+    extends ChoicesInputProps<TextFieldProps>,
         Omit<SupportCreateSuggestionOptions, 'handleChange'>,
         Omit<DownshiftProps<any>, 'onChange'> {
     clearAlwaysVisible?: boolean;
     resettable?: boolean;
     loaded?: boolean;
     loading?: boolean;
+    options?: Options;
 }