Remove lingering border from AddressSearch component

src/components/AddressSearch.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
-import {LogBox} from 'react-native';
+import {LogBox, View} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import CONFIG from '../CONFIG';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
@@ -35,8 +35,11 @@ const defaultProps = {
     containerStyles: null,
 };
 
+// Do not convert to class component! setAddressText only works in functional components!
+// Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
 const AddressSearch = (props) => {
     const googlePlacesRef = useRef();
+    const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
     useEffect(() => {
         if (!googlePlacesRef.current) {
             return;
@@ -79,55 +82,66 @@ const AddressSearch = (props) => {
     };
 
     return (
-        <GooglePlacesAutocomplete
-            ref={googlePlacesRef}
-            fetchDetails
-            suppressDefaultStyles
-            enablePoweredByContainer={false}
-            onPress={(data, details) => saveLocationDetails(details)}
-            query={{
-                key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus',
-                language: props.preferredLocale,
-                types: 'address',
-                components: 'country:us',
-            }}
-            requestUrl={{
-                useOnPlatform: 'web',
-                url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`,
-            }}
-            textInputProps={{
-                InputComp: ExpensiTextInput,
-                label: props.label,
-                containerStyles: props.containerStyles,
-                errorText: props.errorText,
-                onChangeText: (text) => {
-                    const isTextValid = !_.isEmpty(text) && _.isEqual(text, props.value);
 
-                    // Ensure whether an address is selected already or has address value initialized.
-                    if (!_.isEmpty(googlePlacesRef.current.getAddressText()) && !isTextValid) {
-                        saveLocationDetails({});
-                    }
-                },
+        // We use the View height to determine if we should hide the border and margin of the listView dropdown
+        // to prevent a lingering border when there are no address suggestions.
+        // The height of the input + wrapped error message is 112 pixels
+        <View
+            onLayout={(event) => {
+                const {height} = event.nativeEvent.layout;
+                return height > 112 ? setDisplayListViewBorder(true) : setDisplayListViewBorder(false);
             }}
-            styles={{
-                textInputContainer: [styles.flexColumn],
-                listView: [
-                    styles.borderTopRounded,
-                    styles.borderBottomRounded,
-                    styles.mt1,
-                    styles.overflowAuto,
-                    styles.borderLeft,
-                    styles.borderRight,
-                ],
-                row: [
-                    styles.pv4,
-                    styles.ph3,
-                    styles.overflowAuto,
-                ],
-                description: [styles.googleSearchText],
-                separator: [styles.googleSearchSeparator],
-            }}
-        />
+        >
+            <GooglePlacesAutocomplete
+                ref={googlePlacesRef}
+                fetchDetails
+                suppressDefaultStyles
+                enablePoweredByContainer={false}
+                onPress={(data, details) => saveLocationDetails(details)}
+                query={{
+                    key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus',
+                    language: props.preferredLocale,
+                    types: 'address',
+                    components: 'country:us',
+                }}
+                requestUrl={{
+                    useOnPlatform: 'web',
+                    url: `${CONFIG.EXPENSIFY.URL_EXPENSIFY_COM}api?command=Proxy_GooglePlaces&proxyUrl=`,
+                }}
+                textInputProps={{
+                    InputComp: ExpensiTextInput,
+                    label: props.label,
+                    containerStyles: props.containerStyles,
+                    errorText: props.errorText,
+                    onChangeText: (text) => {
+                        const isTextValid = !_.isEmpty(text) && _.isEqual(text, props.value);
+
+                        // Ensure whether an address is selected already or has address value initialized.
+                        if (!_.isEmpty(googlePlacesRef.current.getAddressText()) && !isTextValid) {
+                            saveLocationDetails({});
+                        }
+                    },
+                }}
+                styles={{
+                    textInputContainer: [styles.flexColumn],
+                    listView: [
+                        displayListViewBorder && styles.borderTopRounded,
+                        displayListViewBorder && styles.borderBottomRounded,
+                        displayListViewBorder && styles.mt1,
+                        styles.overflowAuto,
+                        styles.borderLeft,
+                        styles.borderRight,
+                    ],
+                    row: [
+                        styles.pv4,
+                        styles.ph3,
+                        styles.overflowAuto,
+                    ],
+                    description: [styles.googleSearchText],
+                    separator: [styles.googleSearchSeparator],
+                }}
+            />
+        </View>
     );
 };