LocationAutocompleteInput validity and dropdown position

src/components/LocationAutocompleteInput/LocationAutocompleteInput.js

@@ -379,11 +379,15 @@ class LocationAutocompleteInput extends Component {
       iconClassName,
       inputClassName,
       predictionsClassName,
+      validClassName,
       placeholder,
       input,
+      meta,
     } = this.props;
     const { name, onFocus } = input;
     const { search, predictions } = currentValue(this.props);
+    const { touched, valid } = meta || {};
+    const isValid = valid && touched;
 
     const handleOnFocus = e => {
       this.setState({ inputHasFocus: true });
@@ -392,7 +396,7 @@ class LocationAutocompleteInput extends Component {
 
     const rootClass = classNames(rootClassName || css.root, className);
     const iconClass = classNames(css.icon, iconClassName);
-    const inputClass = classNames(css.input, inputClassName);
+    const inputClass = classNames(css.input, inputClassName, { [validClassName]: isValid });
     const predictionsClass = classNames(predictionsClassName);
 
     // Only render predictions when the input has focus. For
@@ -442,7 +446,9 @@ LocationAutocompleteInput.defaultProps = {
   iconClassName: null,
   inputClassName: null,
   predictionsClassName: null,
+  validClassName: null,
   placeholder: '',
+  meta: null,
 };
 
 LocationAutocompleteInput.propTypes = {
@@ -453,6 +459,7 @@ LocationAutocompleteInput.propTypes = {
   iconClassName: string,
   inputClassName: string,
   predictionsClassName: string,
+  validClassName: string,
   placeholder: string,
   input: shape({
     name: string.isRequired,
@@ -465,6 +472,10 @@ LocationAutocompleteInput.propTypes = {
     onFocus: func.isRequired,
     onBlur: func.isRequired,
   }).isRequired,
+  meta: shape({
+    valid: bool.isRequired,
+    touched: bool.isRequired,
+  }),
 };
 
 export default LocationAutocompleteInput;
@@ -496,7 +507,13 @@ class LocationAutocompleteInputFieldComponent extends Component {
   }
 }
 
-LocationAutocompleteInputFieldComponent.defaultProps = { rootClassName: null, labelClassName: null, type: null, label: null, clearOnUnmount: false };
+LocationAutocompleteInputFieldComponent.defaultProps = {
+  rootClassName: null,
+  labelClassName: null,
+  type: null,
+  label: null,
+  clearOnUnmount: false,
+};
 
 LocationAutocompleteInputFieldComponent.propTypes = {
   rootClassName: string,
@@ -513,4 +530,3 @@ LocationAutocompleteInputFieldComponent.propTypes = {
 export const LocationAutocompleteInputField = props => {
   return <Field component={LocationAutocompleteInputFieldComponent} {...props} />;
 };
-

src/containers/EditListingLocationForm/EditListingLocationForm.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
   width: 100%;
   height: 100%;
@@ -7,14 +9,38 @@
 }
 
 .locationAutocompleteInput {
-  height: auto;
+  height: 36px;
   padding-left: 0;
+  border-bottom: 2px solid var(--attentionColor);
+
+  &:hover,
+  &:focus {
+    border-bottom-color: var(--matterColorDark);
+    outline: none;
+  }
 }
 
 .locationAutocompleteInputIcon {
   display: none;
 }
 
+.predictionsRoot {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 98px;
+  top: 36px;
+  left: 0;
+  background-color: var(--marketplaceColor);
+  border-bottom-left-radius: var(--borderRadius);
+  border-bottom-right-radius: var(--borderRadius);
+  box-shadow: var(--boxShadowPopup);
+  z-index: var(--zIndexPopup + 1);
+}
+
+.validLocation {
+  border-bottom-color: var(--successColor);
+}
+
 .building {
   flex-shrink: 0;
   margin-top: 24px;

src/containers/EditListingLocationForm/EditListingLocationForm.js

@@ -45,6 +45,8 @@ export const EditListingLocationFormComponent = props => {
       <LocationAutocompleteInputField
         inputClassName={css.locationAutocompleteInput}
         iconClassName={css.locationAutocompleteInputIcon}
+        predictionsClassName={css.predictionsRoot}
+        validClassName={css.validLocation}
         autoFocus
         name="location"
         label={titleRequiredMessage}
@@ -74,7 +76,7 @@ export const EditListingLocationFormComponent = props => {
       </PrimaryButton>
     </form>
   );
-}
+};
 
 EditListingLocationFormComponent.defaultProps = {
   saveActionMsg: 'Next: pricing', // TODO: i18n