[RFR] Migrate SelectInput to use useInput

examples/simple/src/comments/PostReferenceInput.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState, useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { Field } from 'react-final-form';
+import { FormSpy } from 'react-final-form';
 
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
@@ -93,10 +93,10 @@ const PostReferenceInput = props => {
             >
                 {translate('ra.action.create')}
             </Button>
-            <Field
-                name="post_id"
-                component={({ input }) =>
-                    input.value && (
+            <FormSpy
+                subscription={{ values: true }}
+                render={({ values }) =>
+                    values.post_id ? (
                         <Fragment>
                             <Button
                                 data-testid="button-show-post"
@@ -117,7 +117,7 @@ const PostReferenceInput = props => {
                                 </DialogTitle>
                                 <DialogContent>
                                     <PostPreview
-                                        id={input.value}
+                                        id={values.post_id}
                                         basePath="/posts"
                                         resource="posts"
                                     />
@@ -132,7 +132,7 @@ const PostReferenceInput = props => {
                                 </DialogActions>
                             </Dialog>
                         </Fragment>
-                    )
+                    ) : null
                 }
             />
             <Dialog

packages/ra-core/src/form/useInput.ts

@@ -2,6 +2,7 @@ import {
     useField as useFinalFormField,
     FieldProps as FinalFormFieldProps,
     FieldRenderProps,
+    FieldInputProps,
 } from 'react-final-form';
 import { Validator, composeValidators } from './validate';
 import isRequired from './isRequired';
@@ -21,6 +22,8 @@ export interface InputProps<T = any>
     onChange?: (event: ChangeEvent | any) => void;
     onFocus?: (event: FocusEvent) => void;
     options?: T;
+    input?: FieldInputProps<any, HTMLElement>;
+    meta?: any;
 }
 
 interface ComputedInputProps extends FieldRenderProps<any, HTMLElement> {
@@ -86,6 +89,17 @@ const useInput = ({
         [onFocus, customOnFocus]
     );
 
+    // If there is an input prop, this input has already been enhanced by final-form
+    // This is required in for inputs used inside other inputs (such as the SelectInput inside a ReferenceInput)
+    if (options.input) {
+        return {
+            id: id || source,
+            input: options.input,
+            meta: options.meta,
+            isRequired: isRequired(validate),
+        };
+    }
+
     return {
         id: id || source,
         input: {

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

@@ -126,12 +126,7 @@ export const DateTimeInput: FunctionComponent<
 };
 
 DateTimeInput.propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    input: PropTypes.object,
-    isRequired: PropTypes.bool,
     label: PropTypes.string,
-    meta: PropTypes.object,
     options: PropTypes.object,
     resource: PropTypes.string,
     source: PropTypes.string,

packages/ra-ui-materialui/src/input/SelectInput.js

@@ -1,10 +1,9 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import MenuItem from '@material-ui/core/MenuItem';
-import { withStyles, createStyles } from '@material-ui/core/styles';
-import compose from 'recompose/compose';
-import { addField, translate, FieldTitle, useTranslate } from 'ra-core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useInput, FieldTitle, useTranslate } from 'ra-core';
 
 import ResettableTextField from './ResettableTextField';
 import InputHelperText from './InputHelperText';
@@ -50,12 +49,11 @@ const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-const styles = theme =>
-    createStyles({
-        input: {
-            minWidth: theme.spacing(20),
-        },
-    });
+const useStyles = makeStyles(theme => ({
+    input: {
+        minWidth: theme.spacing(20),
+    },
+}));
 
 /**
  * An Input component for a select box, using an array of objects for the options
@@ -131,60 +129,50 @@ const styles = theme =>
  * <SelectInput source="gender" choices={choices} disableValue="not_available" />
  *
  */
-export const SelectInput = ({
+const SelectInput = ({
     allowEmpty,
     choices,
-    classes,
     className,
     disableValue,
     emptyText,
     emptyValue,
     helperText,
-    input,
-    isRequired,
     label,
-    meta,
+    onBlur,
+    onChange,
+    onFocus,
     options,
     optionText,
     optionValue,
     resource,
     source,
     translateChoice,
+    validate,
     ...rest
 }) => {
-    /*
-     * Using state to bypass a redux-form comparison but which prevents re-rendering
-     * @see https://github.com/erikras/redux-form/issues/2456
-     */
-    const [value, setValue] = useState(input.value);
     const translate = useTranslate();
+    const classes = useStyles({});
 
-    useEffect(() => {
-        setValue(input.value);
-    }, [input]);
-
-    const handleChange = useCallback(
-        eventOrValue => {
-            const value = eventOrValue.target
-                ? eventOrValue.target.value
-                : eventOrValue;
-            input.onChange(value);
-
-            // HACK: For some reason, redux-form does not consider this input touched without calling onBlur manually
-            input.onBlur(value);
-            setValue(value);
-        },
-        [input, setValue]
-    );
+    const {
+        id,
+        input,
+        isRequired,
+        meta: { error, touched },
+    } = useInput({
+        onBlur,
+        onChange,
+        onFocus,
+        resource,
+        source,
+        validate,
+        ...rest,
+    });
 
-    const renderEmptyItemOption = useCallback(
-        emptyText => {
-            return React.isValidElement(emptyText)
-                ? React.cloneElement(emptyText)
-                : translate(emptyText, { _: emptyText });
-        },
-        [emptyText, translate]
-    );
+    const renderEmptyItemOption = useCallback(() => {
+        return React.isValidElement(emptyText)
+            ? React.cloneElement(emptyText)
+            : translate(emptyText, { _: emptyText });
+    }, [emptyText, translate]);
 
     const renderMenuItemOption = useCallback(
         choice => {
@@ -206,18 +194,12 @@ export const SelectInput = ({
         [optionText, translate, translateChoice]
     );
 
-    if (typeof meta === 'undefined') {
-        throw new Error(
-            "The SelectInput component wasn't called within a redux-form <Field>. Did you decorate it and forget to add the addField prop to your component? See https://marmelab.com/react-admin/Inputs.html#writing-your-own-input-component for details."
-        );
-    }
-    const { touched, error } = meta;
-
     return (
         <ResettableTextField
+            id={id}
+            {...input}
             select
             margin="normal"
-            value={value}
             label={
                 <FieldTitle
                     label={label}
@@ -226,7 +208,6 @@ export const SelectInput = ({
                     isRequired={isRequired}
                 />
             }
-            name={input.name}
             className={`${classes.input} ${className}`}
             clearAlwaysVisible
             error={!!(touched && error)}
@@ -239,11 +220,10 @@ export const SelectInput = ({
             }
             {...options}
             {...sanitizeRestProps(rest)}
-            onChange={handleChange}
         >
             {allowEmpty ? (
                 <MenuItem value={emptyValue} key="null">
-                    {renderEmptyItemOption(emptyText)}
+                    {renderEmptyItemOption()}
                 </MenuItem>
             ) : null}
             {choices.map(choice => (
@@ -266,10 +246,7 @@ SelectInput.propTypes = {
     choices: PropTypes.arrayOf(PropTypes.object),
     classes: PropTypes.object,
     className: PropTypes.string,
-    input: PropTypes.object,
-    isRequired: PropTypes.bool,
     label: PropTypes.string,
-    meta: PropTypes.object,
     options: PropTypes.object,
     optionText: PropTypes.oneOfType([
         PropTypes.string,
@@ -280,15 +257,13 @@ SelectInput.propTypes = {
     disableValue: PropTypes.string,
     resource: PropTypes.string,
     source: PropTypes.string,
-    translate: PropTypes.func.isRequired,
     translateChoice: PropTypes.bool,
 };
 
 SelectInput.defaultProps = {
     allowEmpty: false,
     emptyText: '',
     emptyValue: '',
-    classes: {},
     choices: [],
     options: {},
     optionText: 'name',
@@ -297,8 +272,4 @@ SelectInput.defaultProps = {
     disableValue: 'disabled',
 };
 
-export default compose(
-    addField,
-    translate,
-    withStyles(styles)
-)(SelectInput);
+export default SelectInput;