Fix/16448: Reset displayListViewBorder if user don't select option

src/components/AddressSearch.js → src/components/AddressSearch/index.js

@@ -1,16 +1,17 @@
 import _ from 'underscore';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {LogBox, ScrollView, View} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import lodashGet from 'lodash/get';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import styles from '../styles/styles';
-import themeColors from '../styles/themes/default';
-import TextInput from './TextInput';
-import * as ApiUtils from '../libs/ApiUtils';
-import * as GooglePlacesUtils from '../libs/GooglePlacesUtils';
-import CONST from '../CONST';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
+import TextInput from '../TextInput';
+import * as ApiUtils from '../../libs/ApiUtils';
+import * as GooglePlacesUtils from '../../libs/GooglePlacesUtils';
+import CONST from '../../CONST';
+import resetDisplayListViewBorderOnBlur from './resetDisplayListViewBorderOnBlur';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -90,6 +91,7 @@ const defaultProps = {
 // Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
 const AddressSearch = (props) => {
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
+    const containerRef = useRef();
     const query = {language: props.preferredLocale, types: 'address'};
     if (props.isLimitedToUSA) {
         query.components = 'country:us';
@@ -198,7 +200,7 @@ const AddressSearch = (props) => {
             // here: https://github.com/FaridSafi/react-native-google-places-autocomplete#use-inside-a-scrollview-or-flatlist
             keyboardShouldPersistTaps="always"
         >
-            <View style={styles.w100}>
+            <View style={styles.w100} ref={containerRef}>
                 <GooglePlacesAutocomplete
                     disableScroll
                     fetchDetails
@@ -238,7 +240,10 @@ const AddressSearch = (props) => {
                         defaultValue: props.defaultValue,
                         inputID: props.inputID,
                         shouldSaveDraft: props.shouldSaveDraft,
-                        onBlur: props.onBlur,
+                        onBlur: (event) => {
+                            resetDisplayListViewBorderOnBlur(event, containerRef, setDisplayListViewBorder);
+                            props.onBlur(event);
+                        },
                         autoComplete: 'off',
                         onInputChange: (text) => {
                             if (props.inputID) {

src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js

@@ -0,0 +1,14 @@
+const resetDisplayListViewBorderOnBlur = (event, containerRef, setDisplayListViewBorder) => {
+    // The related target check is required here
+    // because without it when we select an option, the onBlur will still trigger setting displayListViewBorder to false
+    // it will make the auto complete component re-render before onPress is called making selecting an option not working.
+    if (containerRef.current && event.target && containerRef.current.contains(event.relatedTarget)) {
+        return;
+    }
+    setDisplayListViewBorder(false);
+};
+
+resetDisplayListViewBorderOnBlur.displayName = 'resetDisplayListViewBorderOnBlur';
+
+export default resetDisplayListViewBorderOnBlur;
+

src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js

@@ -0,0 +1,10 @@
+const resetDisplayListViewBorderOnBlur = (event, containerRef, setDisplayListViewBorder) => {
+    // The related target check is not required here because in native there is no race condition rendering like on the web
+    // onPress still called when cliking the option
+    setDisplayListViewBorder(false);
+};
+
+resetDisplayListViewBorderOnBlur.displayName = 'resetDisplayListViewBorderOnBlur';
+
+export default resetDisplayListViewBorderOnBlur;
+