diff --git a/src/containers/EditListingForm/EditListingForm.js b/src/containers/EditListingForm/EditListingForm.js index 99963422..919524b6 100644 --- a/src/containers/EditListingForm/EditListingForm.js +++ b/src/containers/EditListingForm/EditListingForm.js @@ -48,7 +48,11 @@ const enhancedField = Comp => { ); }; - EnhancedField.displayName = `EnhancedField(${Comp.displayName || Comp.name})`; + let displayName = Comp; + if (Comp && typeof Comp !== 'string') { + displayName = Comp.displayName || Comp.name; + } + EnhancedField.displayName = `EnhancedField(${displayName})`; EnhancedField.defaultProps = { type: null }; @@ -68,6 +72,13 @@ const enhancedField = Comp => { return EnhancedField; }; +// We must create the enhanced components outside the render function +// to avoid losing focus. +// See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14 +const EnhancedInput = enhancedField('input'); +const EnhancedTextArea = enhancedField('textarea'); +const EnhancedLocationAutocompleteInput = enhancedField(LocationAutocompleteInput); + // Add image wrapper. Label is the only visible element, file input is hidden. const RenderAddImage = props => { const { accept, input, label, type } = props; @@ -161,7 +172,7 @@ class EditListingForm extends Component { @@ -199,7 +210,7 @@ class EditListingForm extends Component { name="location" label="Location" format={null} - component={enhancedField(LocationAutocompleteInput)} + component={EnhancedLocationAutocompleteInput} validate={[ autocompleteSearchRequired(locationRequiredMessage), autocompletePlaceSelected(locationNotRecognizedMessage), @@ -209,7 +220,7 @@ class EditListingForm extends Component {