Merge pull request #27035 from shubham1206agra/fix-25595

Fixed no result found after selecting a address from the drop-down menu
Expensify · Oct 5, 2023 · 23d5953 · 23d5953
2 parents 93bfbc5 + 7c3ed3a
commit 23d5953
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -128,7 +128,7 @@
     "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "2.12.0",
-    "react-native-google-places-autocomplete": "git+https://github.com/Expensify/react-native-google-places-autocomplete.git#c8c2a873335df19081056a5667f5c109583882e1",
+    "react-native-google-places-autocomplete": "2.5.5",
     "react-native-haptic-feedback": "^1.13.0",
     "react-native-image-pan-zoom": "^2.1.12",
     "react-native-image-picker": "^5.1.0",

diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {useMemo, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
-import {LogBox, ScrollView, View, Text} from 'react-native';
+import {LogBox, ScrollView, View, Text, ActivityIndicator} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import lodashGet from 'lodash/get';
 import compose from '../../libs/compose';
@@ -134,6 +134,7 @@ const defaultProps = {
 // Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
 function AddressSearch(props) {
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
+    const [isTyping, setIsTyping] = useState(false);
     const containerRef = useRef();
     const query = useMemo(
         () => ({
@@ -287,11 +288,19 @@ function AddressSearch(props) {
                     suppressDefaultStyles
                     enablePoweredByContainer={false}
                     predefinedPlaces={props.predefinedPlaces}
-                    ListEmptyComponent={
-                        props.network.isOffline ? null : (
+                    listEmptyComponent={
+                        props.network.isOffline || !isTyping ? null : (
                             <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{props.translate('common.noResultsFound')}</Text>
                         )
                     }
+                    listLoaderComponent={
+                        <View style={[styles.pv4]}>
+                            <ActivityIndicator
+                                color={themeColors.spinner}
+                                size="small"
+                            />
+                        </View>
+                    }
                     renderHeaderComponent={() =>
                         !props.value &&
                         props.predefinedPlaces && (
@@ -300,6 +309,7 @@ function AddressSearch(props) {
                     }
                     onPress={(data, details) => {
                         saveLocationDetails(data, details);
+                        setIsTyping(false);
 
                         // After we select an option, we set displayListViewBorder to false to prevent UI flickering
                         setDisplayListViewBorder(false);
@@ -338,6 +348,7 @@ function AddressSearch(props) {
                         },
                         autoComplete: 'off',
                         onInputChange: (text) => {
+                            setIsTyping(true);
                             if (props.inputID) {
                                 props.onInputChange(text);
                             } else {