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 {