Merge pull request #6115 from Expensify/cmartins-fixLingeringBorder

Remove lingering border from AddressSearch component
Expensify · Nov 9, 2021 · 7b2e671 · 7b2e671
2 parents e230e7e + 6ecacd5
commit 7b2e671
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js
@@ -1,5 +1,5 @@
 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 {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
@@ -35,8 +35,12 @@ const defaultProps = {
     containerStyles: null,
 };
 
+// Do not convert to class component! It's been tried before and presents more challenges than it's worth.
+// Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400
+// 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;
@@ -84,7 +88,12 @@ const AddressSearch = (props) => {
             fetchDetails
             suppressDefaultStyles
             enablePoweredByContainer={false}
-            onPress={(data, details) => saveLocationDetails(details)}
+            onPress={(data, details) => {
+                saveLocationDetails(details);
+
+                // After we select an option, we set displayListViewBorder to false to prevent UI flickering
+                setDisplayListViewBorder(false);
+            }}
             query={{
                 key: 'AIzaSyC4axhhXtpiS-WozJEsmlL3Kg3kXucbZus',
                 language: props.preferredLocale,
@@ -107,14 +116,20 @@ const AddressSearch = (props) => {
                     if (!_.isEmpty(googlePlacesRef.current.getAddressText()) && !isTextValid) {
                         saveLocationDetails({});
                     }
+
+                    // If the text is empty, we set displayListViewBorder to false to prevent UI flickering
+                    if (_.isEmpty(text)) {
+                        setDisplayListViewBorder(false);
+                    }
                 },
             }}
             styles={{
                 textInputContainer: [styles.flexColumn],
                 listView: [
-                    styles.borderTopRounded,
-                    styles.borderBottomRounded,
-                    styles.mt1,
+                    !displayListViewBorder && styles.googleListView,
+                    displayListViewBorder && styles.borderTopRounded,
+                    displayListViewBorder && styles.borderBottomRounded,
+                    displayListViewBorder && styles.mt1,
                     styles.overflowAuto,
                     styles.borderLeft,
                     styles.borderRight,
@@ -127,6 +142,12 @@ const AddressSearch = (props) => {
                 description: [styles.googleSearchText],
                 separator: [styles.googleSearchSeparator],
             }}
+            onLayout={(event) => {
+                // We use the height of the element to determine if we should hide the border of the listView dropdown
+                // to prevent a lingering border when there are no address suggestions.
+                // The height of the empty element is 2px (1px height for each top and bottom borders)
+                setDisplayListViewBorder(event.nativeEvent.layout.height > 2);
+            }}
         />
     );
 };

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2085,6 +2085,10 @@ const styles = {
         fontFamily: fontFamily.GTA,
         flex: 1,
     },
+
+    googleListView: {
+        transform: [{scale: 0}],
+    },
 };
 
 const baseCodeTagStyles = {