React-admin: AutocompleteInput inside a ReferenceInput with allowEmpty=true will not always display the selected value.

[slocka]

When using <ReferenceInput /> with the allowEmpty={true}, the AutocompleteInput child will not display any selected value if the referenced object wasn't already in the redux-store when the component mounted.

Ex:

<ReferenceInput
    source="related_song.id"
    label="Related song"
    reference="song"
    allowEmpty={true} // Works fine if set to false
>
    <AutocompleteInput optionText={song_title}/>
</ReferenceInput>

• if admin.resources.song.data[related_song.id] already exist in the store when mounting the AutocompleteInput component, everything works fine and the AutocompleteInput displays the admin.resources.song.data[related_song.id] as the selected value.
• if admin.resources.song.data[related_song.id] doesn't exist yet in the store when mounting the AutocompleteInput component, the referenced song data will be fetched and added to the store but the AutocompleteInput will not display any selected value.

What you were expecting:
The input should be populated with the existing value even when the reference data is fetched after the input has been mounted.

What happened instead:
The input stays empty if the data of the reference is not in the redux store when the input component mount.

Steps to reproduce:

// inside CommentEdit.js
      <ReferenceInput
        source="post_id"
        reference="posts"
        perPage={5}
        sort={{ field: 'title', order: 'ASC' }}
        allowEmpty={true}
      >
        <AutocompleteInput optionText="title" />
      </ReferenceInput>

• Inside the CommentEdit page of the comment resource, following the example above, create a ReferenceInput (using allowEmpty={true}!) and anAutocompleteInput referencing posts resource.
• Go to the edit page and hit refresh to reload the page and start with a clean redux state in which we don't have any resource pre-existing in the store.
• The AutocompleteInput stays empty when it should display the title of the existing post.

Other information:

• I tried to reproduce this issue in the sandbox but couldn't as it looks like all the data are pre-loaded in the store from data.js.

• After spending some time debugging admin-on-rest it seems that the problem could come from the componentWillReceiveProps of the AutocompleteInput components which will only call setSearchText if this.props.input.value !== nextProps.input.value ignoring the fact that when wrapped inside a ReferenceInput this.props.choices will change overtime as well.

Environment

• Admin-on-rest version: 1.3.2
• React version: 15.5.4
• Browser: Chrome

[prestontighe]

I confirm I have this issue too. When I refresh the single resource page, the reference input field doesn't have a value. If I click the list page and then go back to the resource it works.

[alextsoi]

I got this issue too. I think when we enter the editing page, the choices are not yet loaded and the saved value cannot be found in choices array ( empty ), therefore empty value is displayed in the field.

[vantox]

I got similar issue while using selectInput inside referencInput, i solved it by connecting my edit component to state:

export const Edit = connect(state => ({
  record: state.form['record-form'] ? state.form['record-form'].values : null,
}))(EditComponent);

and then setting key in referenceinput like this:
key={props.record ? props.record.someValue : ''}

[djhi]

Can't reproduce anymore with 1.3.4. Feel free to reopen if needed