React-admin: crudGetMatching does not working with <AutocompleteInput />

[wmwart]

What you were expecting:
For my project, I used the Advanced Tutorials "Custom Forms and UI for related records". I expected that everything will work as a guide.

What happened instead:
Until a certain point, everything worked well. Then I noticed that after creating the record and trying to create another previous data is saved. I fixed it. Added call resetForm and reset (something one does not work)

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { change, submit, isSubmitting, reset } from 'redux-form';
...
import {  
  ...
    fetchEnd,
    fetchStart,
    showNotification,
    resetForm,
    REDUX_FORM_NAME,
    crudGetMatching,
} from 'react-admin';
...

class UserQuickCreateButton extends Component {

    constructor(props) {      
        super(props);
        this.state = {
            error: false,
            showDialog: false
        };
    }

    handleClick = () => {
        const { reset, resetForm } = this.props;
        resetForm('user-quick-create')
        reset('user-quick-create')
        this.setState({ showDialog: true });
    };

    handleCloseClick = () => {
        const { reset, resetForm } = this.props;
        resetForm('user-quick-create')
        reset('user-quick-create')
        this.setState({ showDialog: false });

    };

    handleSaveClick = () => {
        const { submit } = this.props;
        submit('user-quick-create');
    };

    handleSubmit = values => {
        const { change, crudGetMatching, fetchStart, fetchEnd, showNotification, source, reset, resetForm } = this.props;

        // Dispatch an action letting react-admin know a API call is ongoing
        fetchStart();

        // As we want to know when the new post has been created in order to close the modal, we use the
        // dataProvider directly
        radataProvider().then(dataProvider => {                                
            dataProvider(CREATE, 'User', { data: values })
            .then(({ data }) => {

                // Update the main react-admin form (in this case, the comments creation form)
                crudGetMatching(
                    'User',
                    'Order@' + source,
                    { page: 1, perPage: 25 },
                    { field: 'name', order: 'ASC' },
                );

                change(REDUX_FORM_NAME, source, data.id);

                resetForm('user-quick-create')
                reset('user-quick-create')
                this.setState({ showDialog: false });
            })
            .catch(error => {
                showNotification(error.message, 'error');
            })
            .finally(() => {
                // Dispatch an action letting react-admin know a API call has ended
                fetchEnd();

            });                    
        });     
    };

    render() {
        const { showDialog } = this.state;
        const { isSubmitting, source, classes } = this.props;

        ...

        return (
            <Fragment>
                <Button onClick={this.handleClick} label="ra.action.create">
                    <IconContentAdd />
                </Button>
                <Dialog fullWidth open={showDialog} onClose={this.handleCloseClick} aria-label="Create user">

                    <DialogTitle><TitleHeader role={curentRole}></TitleHeader></DialogTitle>

                    <DialogContent>
                        <SimpleForm form="user-quick-create" resource="User" onSubmit={this.handleSubmit} toolbar={null} >

...

                        </SimpleForm>
                    </DialogContent>

                    <DialogActions className={`${classes.toolbar}`}>
                        <SaveButton
                            label="ra.action.create"
                            saving={isSubmitting}
                            onClick={this.handleSaveClick}
                        />
                        <Button className={`${classes.cancelButton}`} label="ra.action.cancel" onClick={this.handleCloseClick}>
                            <IconCancel />
                        </Button>
                    </DialogActions>
                </Dialog>
            </Fragment>
        );
    }
}

const mapStateToProps = state => {
    return ({
        isSubmitting: isSubmitting('user-quick-create')(state)
    });
} 

const mapDispatchToProps = {
    change,
    crudGetMatching,
    fetchEnd,
    fetchStart,
    showNotification,
    submit,
    reset,
    resetForm,
};

export default connect(mapStateToProps, mapDispatchToProps)(
    withStyles(styles)(UserQuickCreateButton)

);

Then I upgraded to 2.8.4 and noticed that the record created was set to the value of the redux-form, but not in . Perhaps this happened earlier than I installed 2.8.4, I noticed only now. In addition, after logout and login, the first time a user is created, he enters the list, and then stops.

Steps to reproduce:

Related code:

const UserReferenceInput = (props) => {

    return (
        <Fragment >
            <ReferenceInput {...props} source="customer.id" reference="User"  allowEmpty >
                <AutocompleteInput  optionText="name"    
            </ReferenceInput>
            <UserQuickCreateButton source={props.source} />
            <Field name={props.source} component={({ input }) => input.value && <UserQuickPreviewButton id={input.value} />}/>
        </Fragment>
    );
} 

Other information:
Could this be related to the nested resource?

Environment

• React-admin version: 2.8.4
• Last version that did not exhibit the issue (if applicable): presumably 2.8.0
• React version: 16.8.4
• Browser:
• Stack trace (in case of a JS error):

[djhi]

Thanks for reporting this. If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:

• CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple)
• A sample application via GitHub

[wmwart]

I can show an example of work

[wmwart]

I also noticed that when I select from the list and then click on the create button, the field is cleared.

[djhi]

Thanks but a codesandbox would really help us to debug this

[wmwart]

update: in despair, I deleted my component and rewrote it again using the code from the sandbox.
My code was different only using the AutocompleteInput component. I changed it to SelectInput and it all worked. Rename.

to play in the sandbox, install react-admin 2.8.4 (I've updated React and React-dom ) and replace <SelectInput /> with <AutocompleteInput />

[wmwart]

@djhi, enough information?

[Kmaschta]

Ok, I reproduced on the CodeSandbox, so I confirm the bug.

To be explicit:

• Go to the CodeSandbox: https://codesandbox.io/s/q9zp17kmq
• Go the Comment resource and create a new one. In the Post field, instead of selecting an existing post, create a new one with the "+" button.
  
  
  

  Creation step by step

• At the end of the creation, we see the new post title in the "post" field.
  This is because we have a SelectInput.

• Now, in src/comments/PostReferenceInput.js, replace the SelectInput by an AutocompleteInput.

const PostReferenceInput = props => (
    <Fragment>
        <ReferenceInput {...props}>
-            <SelectInput optionText="title" />
+            <AutocompleteInput optionText="title" />
        </ReferenceInput>

        <PostQuickCreateButton />
        {/* We use Field to get the current value of the `post_id` field */}
        <Field
            name="post_id"
            component={({ input }) =>
                input.value && <PostQuickPreviewButton id={input.value} />
            }
        />
    </Fragment>
);

• Repeat the operation above, by creating a new Comment, with a new Post. At this point, the new post is created, but its title don't show up in the field.

This is the bug.

[Kmaschta]

Might be related to #3031

[fzaninotto]

Not fixed by #3031, this one still exists in v3-alpha.3.

[fzaninotto]

Fixed by #3683