AutocompleteInput does not pass on InputProps to material-ui TextField

[justinr1234]

What you were expecting:
AutocompleteInput does not respect all options passed to it.

The docs state the following:

<AutocompleteInput> renders a material-ui <TextField> component. Use the options attribute to override any of the <TextField> attributes:

<AutocompleteInput source="category" options={{
    color: 'secondary',
}} />

The issue here is that in the code, the InputProps parameter, when set inside options, is actually considered to be literal <input> properties that are called using the downshift function getInputProps.

https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L354

Then you can see in the code that is passed to the underlying material-ui <TextField> that it wholesale sets InputProps to its own derived values: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L363

This means there's a ton of things, such as endAdornment, which can't be properly set because it isn't properly passed on to the underlying input.

My Question

Will you welcome a pull request to change the behavior to pass on all properties except the ones that react-admin explicitly cares about?

Current code:

InputProps={{
    inputRef: storeInputRef,
    onBlur,
    onChange: event => {
        handleFilterChange(event);
        setFilterValue(event.target.value);
        onChange!(event as React.ChangeEvent<
            HTMLInputElement
        >);
    },
    onFocus,
}}

Proposed code:

InputProps={{
    ...InputProps,
    inputRef: storeInputRef,
    onBlur,
    onChange: event => {
        handleFilterChange(event);
        setFilterValue(event.target.value);
        onChange!(event as React.ChangeEvent<
            HTMLInputElement
        >);
    },
    onFocus,
}}

[JulienMattiussi]

We would be happy if you can do so.

As you pointed, InputProps are not currently passed to TextField in the simple way, but are used behind a complexier Downshift transition.

Try to think about some unit test to check this change.

[justinr1234]

@JulienMattiussi I can definitely work on some, do you have any that immediately comes to mind? Thanks for the help!

[justinr1234]

@JulienMattiussi did you have any input? Thanks for your help!

[Kmaschta]

This seems like a common problem with high level inputs (PasswordInput, SearchInput, ResettableTextField, AutocompleteArrayInput).

We're doing something with the ResettableTextField tho:

react-admin/packages/ra-ui-materialui/src/input/ResettableTextField.js

Line 91 in eb381f4

const { endAdornment, ...InputPropsWithoutEndAdornment } = InputProps || {};

Maybe you can take this one as an example?

[henrik-d]

Any progress on this one? I would also like to set endAdornment.

[justinr1234]

@Kmaschta what would the unit tests look like that @JulienMattiussi alluded to?

[fzaninotto]

Fixed by #5396

[hvqzao]

For those looking for information on how to pass refs:
There is undocumented inconsistency - while for TextInput we pass options={{ inputRef: ... }} for AutocompleteInput we need to pass options={{ inputProps: { ref: ... } }}.