Merge pull request #16875 from tienifr/fix/16448

Fix/16448: Reset displayListViewBorder if user don't select option
Expensify · Apr 25, 2023 · 6b46d22 · 6b46d22
2 parents d11f97f + 168325c
commit 6b46d22
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
     "react-native-document-picker": "^8.0.0",
     "react-native-fast-image": "git+https://github.com/Expensify/react-native-fast-image.git#afedf204bfc253d18f08fdcc5356a2bb82f6a87c",
     "react-native-gesture-handler": "2.9.0",
-    "react-native-google-places-autocomplete": "git+https://github.com/Expensify/react-native-google-places-autocomplete.git#e12768f1542e7982d90f6449798f0d6b7f18f192",
+    "react-native-google-places-autocomplete": "git+https://github.com/Expensify/react-native-google-places-autocomplete.git#6f436a06a3018cb49750bb110b89df75f6a865d5",
     "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.js → src/components/AddressSearch/index.js b/src/components/AddressSearch.js → src/components/AddressSearch/index.js
@@ -1,18 +1,19 @@
 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 * as StyleUtils from '../styles/StyleUtils';
-import variables from '../styles/variables';
+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 * as StyleUtils from '../../styles/StyleUtils';
+import resetDisplayListViewBorderOnBlur from './resetDisplayListViewBorderOnBlur';
+import variables from '../../styles/variables';
 
 // The error that's being thrown below will be ignored until we fork the
 // react-native-google-places-autocomplete repo and replace the
@@ -92,6 +93,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';
@@ -202,7 +204,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
@@ -242,7 +244,10 @@ const AddressSearch = (props) => {
                         defaultValue: props.defaultValue,
                         inputID: props.inputID,
                         shouldSaveDraft: props.shouldSaveDraft,
-                        onBlur: props.onBlur,
+                        onBlur: (event) => {
+                            resetDisplayListViewBorderOnBlur(setDisplayListViewBorder, event, containerRef);
+                            props.onBlur();
+                        },
                         autoComplete: 'off',
                         onInputChange: (text) => {
                             if (props.inputID) {

diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js
@@ -0,0 +1,12 @@
+function resetDisplayListViewBorderOnBlur(setDisplayListViewBorder, event, containerRef) {
+    // 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);
+}
+
+export default resetDisplayListViewBorderOnBlur;
+
diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js
@@ -0,0 +1,8 @@
+function resetDisplayListViewBorderOnBlur(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);
+}
+
+export default resetDisplayListViewBorderOnBlur;
+