From 42c8220bc3309253a4749b330a04adeb46e952f3 Mon Sep 17 00:00:00 2001 From: christianwenifr Date: Sat, 1 Apr 2023 15:52:27 +0700 Subject: [PATCH 01/11] fix: issue --- src/components/AddressSearch.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 683d3556dec4..65a2d030e74d 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -1,5 +1,5 @@ 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'; @@ -90,6 +90,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'; @@ -193,7 +194,7 @@ const AddressSearch = (props) => { // here: https://github.com/FaridSafi/react-native-google-places-autocomplete#use-inside-a-scrollview-or-flatlist keyboardShouldPersistTaps="always" > - + { defaultValue: props.defaultValue, inputID: props.inputID, shouldSaveDraft: props.shouldSaveDraft, - onBlur: props.onBlur, + onBlur: (event) => { + if (!(containerRef.current && event.target && containerRef.current.contains(event.relatedTarget))) { + setDisplayListViewBorder(false); + } + props.onBlur(event); + }, autoComplete: 'off', onInputChange: (text) => { if (props.inputID) { From a2e9c80914221228ee91e4a8129d9a513ca95d9c Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 4 Apr 2023 21:40:07 +0700 Subject: [PATCH 02/11] fix: do not add new logic on native --- src/components/AddressSearch.js | 5 ++--- src/libs/resetDisplayListViewborderWhenBlur/index.js | 10 ++++++++++ .../resetDisplayListViewborderWhenBlur/index.native.js | 8 ++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 src/libs/resetDisplayListViewborderWhenBlur/index.js create mode 100644 src/libs/resetDisplayListViewborderWhenBlur/index.native.js diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js index 5c854bc2981b..e35d879dccf0 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch.js @@ -11,6 +11,7 @@ import TextInput from './TextInput'; import * as ApiUtils from '../libs/ApiUtils'; import * as GooglePlacesUtils from '../libs/GooglePlacesUtils'; import CONST from '../CONST'; +import DisplayListViewborder from '../libs/resetDisplayListViewborderWhenBlur'; // The error that's being thrown below will be ignored until we fork the // react-native-google-places-autocomplete repo and replace the @@ -240,9 +241,7 @@ const AddressSearch = (props) => { inputID: props.inputID, shouldSaveDraft: props.shouldSaveDraft, onBlur: (event) => { - if (!(containerRef.current && event.target && containerRef.current.contains(event.relatedTarget))) { - setDisplayListViewBorder(false); - } + DisplayListViewborder.resetDisplayListViewborderWhenBlur(event, containerRef, setDisplayListViewBorder); props.onBlur(event); }, autoComplete: 'off', diff --git a/src/libs/resetDisplayListViewborderWhenBlur/index.js b/src/libs/resetDisplayListViewborderWhenBlur/index.js new file mode 100644 index 000000000000..af70655eacbc --- /dev/null +++ b/src/libs/resetDisplayListViewborderWhenBlur/index.js @@ -0,0 +1,10 @@ +const resetDisplayListViewborderWhenBlur = (event, containerRef, setDisplayListViewBorder) => { + if (containerRef.current && event.target && containerRef.current.contains(event.relatedTarget)) { + return; + } + setDisplayListViewBorder(false); +}; + +export default { + resetDisplayListViewborderWhenBlur, +}; diff --git a/src/libs/resetDisplayListViewborderWhenBlur/index.native.js b/src/libs/resetDisplayListViewborderWhenBlur/index.native.js new file mode 100644 index 000000000000..16a0197af88b --- /dev/null +++ b/src/libs/resetDisplayListViewborderWhenBlur/index.native.js @@ -0,0 +1,8 @@ +const resetDisplayListViewborderWhenBlur = (event, containerRef, setDisplayListViewBorder) => { + console.log('native', setDisplayListViewBorder); + setDisplayListViewBorder(false); +}; + +export default { + resetDisplayListViewborderWhenBlur, +}; From 6ebf65b7479198c9d3715e4827752172d3fcee82 Mon Sep 17 00:00:00 2001 From: tienifr Date: Tue, 4 Apr 2023 21:48:15 +0700 Subject: [PATCH 03/11] fix: remove log --- src/libs/resetDisplayListViewborderWhenBlur/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/resetDisplayListViewborderWhenBlur/index.native.js b/src/libs/resetDisplayListViewborderWhenBlur/index.native.js index 16a0197af88b..789c0cbe2df6 100644 --- a/src/libs/resetDisplayListViewborderWhenBlur/index.native.js +++ b/src/libs/resetDisplayListViewborderWhenBlur/index.native.js @@ -1,5 +1,4 @@ const resetDisplayListViewborderWhenBlur = (event, containerRef, setDisplayListViewBorder) => { - console.log('native', setDisplayListViewBorder); setDisplayListViewBorder(false); }; From c51901b412f910084a976da281cc678d6567e481 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 6 Apr 2023 10:05:00 +0700 Subject: [PATCH 04/11] fix: add comment and move the logic correctly --- .../{ => AddressSearch}/AddressSearch.js | 20 ++++++++++--------- .../index.js | 14 +++++++++++++ .../index.native.js | 10 ++++++++++ src/pages/ReimbursementAccount/AddressForm.js | 2 +- .../settings/Payments/AddDebitCardPage.js | 2 +- .../Profile/PersonalDetails/AddressPage.js | 2 +- src/stories/AddressSearch.stories.js | 2 +- src/stories/Form.stories.js | 2 +- 8 files changed, 40 insertions(+), 14 deletions(-) rename src/components/{ => AddressSearch}/AddressSearch.js (94%) create mode 100644 src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.js create mode 100644 src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch/AddressSearch.js similarity index 94% rename from src/components/AddressSearch.js rename to src/components/AddressSearch/AddressSearch.js index e35d879dccf0..e676f4eb67ea 100644 --- a/src/components/AddressSearch.js +++ b/src/components/AddressSearch/AddressSearch.js @@ -4,14 +4,14 @@ 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 DisplayListViewborder from '../libs/resetDisplayListViewborderWhenBlur'; +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 resetDisplayListViewBorderWhenBlur from './resetDisplayListViewBorderWhenBlur'; // The error that's being thrown below will be ignored until we fork the // react-native-google-places-autocomplete repo and replace the @@ -207,6 +207,7 @@ const AddressSearch = (props) => { suppressDefaultStyles enablePoweredByContainer={false} onPress={(data, details) => { + console.log('onPress'); saveLocationDetails(data, details); // After we select an option, we set displayListViewBorder to false to prevent UI flickering @@ -241,7 +242,8 @@ const AddressSearch = (props) => { inputID: props.inputID, shouldSaveDraft: props.shouldSaveDraft, onBlur: (event) => { - DisplayListViewborder.resetDisplayListViewborderWhenBlur(event, containerRef, setDisplayListViewBorder); + console.log(resetDisplayListViewBorderWhenBlur); + resetDisplayListViewBorderWhenBlur(event, containerRef, setDisplayListViewBorder); props.onBlur(event); }, autoComplete: 'off', diff --git a/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.js b/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.js new file mode 100644 index 000000000000..35dc820d649c --- /dev/null +++ b/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.js @@ -0,0 +1,14 @@ +const resetDisplayListViewBorderWhenBlur = (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); +}; + +resetDisplayListViewBorderWhenBlur.displayName = 'resetDisplayListViewBorderWhenBlur'; + +export default resetDisplayListViewBorderWhenBlur; + diff --git a/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js b/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js new file mode 100644 index 000000000000..aaef369af85b --- /dev/null +++ b/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js @@ -0,0 +1,10 @@ +const resetDisplayListViewBorderWhenBlur = (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); +}; + +resetDisplayListViewBorderWhenBlur.displayName = 'resetDisplayListViewBorderWhenBlur'; + +export default resetDisplayListViewBorderWhenBlur; + diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index 997ed10d2b4f..008915d2e254 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -2,10 +2,10 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import TextInput from '../../components/TextInput'; -import AddressSearch from '../../components/AddressSearch'; import styles from '../../styles/styles'; import CONST from '../../CONST'; import StatePicker from '../../components/StatePicker'; +import AddressSearch from '../../components/AddressSearch/AddressSearch'; const propTypes = { diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index a8862154221a..ec76db28b10b 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -18,10 +18,10 @@ import StatePicker from '../../../components/StatePicker'; import TextInput from '../../../components/TextInput'; import CONST from '../../../CONST'; import ONYXKEYS from '../../../ONYXKEYS'; -import AddressSearch from '../../../components/AddressSearch'; import * as ComponentUtils from '../../../libs/ComponentUtils'; import Form from '../../../components/Form'; import Permissions from '../../../libs/Permissions'; +import AddressSearch from '../../../components/AddressSearch/AddressSearch'; const propTypes = { /* Onyx Props */ diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index b594cd09f3a1..5a6295c4363d 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -18,9 +18,9 @@ import Navigation from '../../../../libs/Navigation/Navigation'; import * as PersonalDetails from '../../../../libs/actions/PersonalDetails'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import compose from '../../../../libs/compose'; -import AddressSearch from '../../../../components/AddressSearch'; import CountryPicker from '../../../../components/CountryPicker'; import StatePicker from '../../../../components/StatePicker'; +import AddressSearch from '../../../../components/AddressSearch/AddressSearch'; const propTypes = { /* Onyx Props */ diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.js index b19d3ac46b3a..dd696890410f 100644 --- a/src/stories/AddressSearch.stories.js +++ b/src/stories/AddressSearch.stories.js @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import AddressSearch from '../components/AddressSearch'; +import AddressSearch from '../components/AddressSearch/AddressSearch'; /** * We use the Component Story Format for writing stories. Follow the docs here: diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index da684206f204..921852addb8a 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -3,7 +3,6 @@ import {View} from 'react-native'; import TextInput from '../components/TextInput'; import Picker from '../components/Picker'; import StatePicker from '../components/StatePicker'; -import AddressSearch from '../components/AddressSearch'; import DatePicker from '../components/DatePicker'; import Form from '../components/Form'; import * as FormActions from '../libs/actions/FormActions'; @@ -11,6 +10,7 @@ import styles from '../styles/styles'; import CheckboxWithLabel from '../components/CheckboxWithLabel'; import Text from '../components/Text'; import NetworkConnection from '../libs/NetworkConnection'; +import AddressSearch from '../components/AddressSearch/AddressSearch'; /** * We use the Component Story Format for writing stories. Follow the docs here: From 192c6e9229fcdf3125f2a32edae7b8edcc3eb6c6 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 6 Apr 2023 10:08:20 +0700 Subject: [PATCH 05/11] fix: remove log --- src/components/AddressSearch/AddressSearch.js | 2 -- src/libs/resetDisplayListViewborderWhenBlur/index.js | 10 ---------- .../resetDisplayListViewborderWhenBlur/index.native.js | 7 ------- 3 files changed, 19 deletions(-) delete mode 100644 src/libs/resetDisplayListViewborderWhenBlur/index.js delete mode 100644 src/libs/resetDisplayListViewborderWhenBlur/index.native.js diff --git a/src/components/AddressSearch/AddressSearch.js b/src/components/AddressSearch/AddressSearch.js index e676f4eb67ea..b2f6c89f0fb3 100644 --- a/src/components/AddressSearch/AddressSearch.js +++ b/src/components/AddressSearch/AddressSearch.js @@ -207,7 +207,6 @@ const AddressSearch = (props) => { suppressDefaultStyles enablePoweredByContainer={false} onPress={(data, details) => { - console.log('onPress'); saveLocationDetails(data, details); // After we select an option, we set displayListViewBorder to false to prevent UI flickering @@ -242,7 +241,6 @@ const AddressSearch = (props) => { inputID: props.inputID, shouldSaveDraft: props.shouldSaveDraft, onBlur: (event) => { - console.log(resetDisplayListViewBorderWhenBlur); resetDisplayListViewBorderWhenBlur(event, containerRef, setDisplayListViewBorder); props.onBlur(event); }, diff --git a/src/libs/resetDisplayListViewborderWhenBlur/index.js b/src/libs/resetDisplayListViewborderWhenBlur/index.js deleted file mode 100644 index af70655eacbc..000000000000 --- a/src/libs/resetDisplayListViewborderWhenBlur/index.js +++ /dev/null @@ -1,10 +0,0 @@ -const resetDisplayListViewborderWhenBlur = (event, containerRef, setDisplayListViewBorder) => { - if (containerRef.current && event.target && containerRef.current.contains(event.relatedTarget)) { - return; - } - setDisplayListViewBorder(false); -}; - -export default { - resetDisplayListViewborderWhenBlur, -}; diff --git a/src/libs/resetDisplayListViewborderWhenBlur/index.native.js b/src/libs/resetDisplayListViewborderWhenBlur/index.native.js deleted file mode 100644 index 789c0cbe2df6..000000000000 --- a/src/libs/resetDisplayListViewborderWhenBlur/index.native.js +++ /dev/null @@ -1,7 +0,0 @@ -const resetDisplayListViewborderWhenBlur = (event, containerRef, setDisplayListViewBorder) => { - setDisplayListViewBorder(false); -}; - -export default { - resetDisplayListViewborderWhenBlur, -}; From 1502b855ef6419bf6af88bf0e26a316d2daf386a Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 6 Apr 2023 18:35:26 +0700 Subject: [PATCH 06/11] fix: rename file --- .../AddressSearch/{AddressSearch.js => index.js} | 4 ++-- .../index.js => resetDisplayListViewBorderOnBlur.js} | 6 +++--- .../resetDisplayListViewBorderOnBlur.native.js | 10 ++++++++++ .../resetDisplayListViewBorderWhenBlur/index.native.js | 10 ---------- src/pages/ReimbursementAccount/AddressForm.js | 2 +- src/pages/settings/Payments/AddDebitCardPage.js | 2 +- .../settings/Profile/PersonalDetails/AddressPage.js | 2 +- src/stories/AddressSearch.stories.js | 2 +- src/stories/Form.stories.js | 2 +- 9 files changed, 20 insertions(+), 20 deletions(-) rename src/components/AddressSearch/{AddressSearch.js => index.js} (98%) rename src/components/AddressSearch/{resetDisplayListViewBorderWhenBlur/index.js => resetDisplayListViewBorderOnBlur.js} (66%) create mode 100644 src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js delete mode 100644 src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js diff --git a/src/components/AddressSearch/AddressSearch.js b/src/components/AddressSearch/index.js similarity index 98% rename from src/components/AddressSearch/AddressSearch.js rename to src/components/AddressSearch/index.js index b2f6c89f0fb3..185ac12c3e92 100644 --- a/src/components/AddressSearch/AddressSearch.js +++ b/src/components/AddressSearch/index.js @@ -11,7 +11,7 @@ import TextInput from '../TextInput'; import * as ApiUtils from '../../libs/ApiUtils'; import * as GooglePlacesUtils from '../../libs/GooglePlacesUtils'; import CONST from '../../CONST'; -import resetDisplayListViewBorderWhenBlur from './resetDisplayListViewBorderWhenBlur'; +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 @@ -241,7 +241,7 @@ const AddressSearch = (props) => { inputID: props.inputID, shouldSaveDraft: props.shouldSaveDraft, onBlur: (event) => { - resetDisplayListViewBorderWhenBlur(event, containerRef, setDisplayListViewBorder); + resetDisplayListViewBorderOnBlur(event, containerRef, setDisplayListViewBorder); props.onBlur(event); }, autoComplete: 'off', diff --git a/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js similarity index 66% rename from src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.js rename to src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js index 35dc820d649c..eb79e14e0913 100644 --- a/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.js +++ b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js @@ -1,4 +1,4 @@ -const resetDisplayListViewBorderWhenBlur = (event, containerRef, setDisplayListViewBorder) => { +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. @@ -8,7 +8,7 @@ const resetDisplayListViewBorderWhenBlur = (event, containerRef, setDisplayListV setDisplayListViewBorder(false); }; -resetDisplayListViewBorderWhenBlur.displayName = 'resetDisplayListViewBorderWhenBlur'; +resetDisplayListViewBorderOnBlur.displayName = 'resetDisplayListViewBorderOnBlur'; -export default resetDisplayListViewBorderWhenBlur; +export default resetDisplayListViewBorderOnBlur; diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js new file mode 100644 index 000000000000..ab2282cff90d --- /dev/null +++ b/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; + diff --git a/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js b/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js deleted file mode 100644 index aaef369af85b..000000000000 --- a/src/components/AddressSearch/resetDisplayListViewBorderWhenBlur/index.native.js +++ /dev/null @@ -1,10 +0,0 @@ -const resetDisplayListViewBorderWhenBlur = (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); -}; - -resetDisplayListViewBorderWhenBlur.displayName = 'resetDisplayListViewBorderWhenBlur'; - -export default resetDisplayListViewBorderWhenBlur; - diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index 008915d2e254..9004552ef466 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -5,7 +5,7 @@ import TextInput from '../../components/TextInput'; import styles from '../../styles/styles'; import CONST from '../../CONST'; import StatePicker from '../../components/StatePicker'; -import AddressSearch from '../../components/AddressSearch/AddressSearch'; +import AddressSearch from '../../components/AddressSearch'; const propTypes = { diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index ec76db28b10b..6a6799e662f7 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -21,7 +21,7 @@ import ONYXKEYS from '../../../ONYXKEYS'; import * as ComponentUtils from '../../../libs/ComponentUtils'; import Form from '../../../components/Form'; import Permissions from '../../../libs/Permissions'; -import AddressSearch from '../../../components/AddressSearch/AddressSearch'; +import AddressSearch from '../../../components/AddressSearch'; const propTypes = { /* Onyx Props */ diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index 5a6295c4363d..82cc70e9c92d 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -20,7 +20,7 @@ import * as ValidationUtils from '../../../../libs/ValidationUtils'; import compose from '../../../../libs/compose'; import CountryPicker from '../../../../components/CountryPicker'; import StatePicker from '../../../../components/StatePicker'; -import AddressSearch from '../../../../components/AddressSearch/AddressSearch'; +import AddressSearch from '../../../../components/AddressSearch'; const propTypes = { /* Onyx Props */ diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.js index dd696890410f..b19d3ac46b3a 100644 --- a/src/stories/AddressSearch.stories.js +++ b/src/stories/AddressSearch.stories.js @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import AddressSearch from '../components/AddressSearch/AddressSearch'; +import AddressSearch from '../components/AddressSearch'; /** * We use the Component Story Format for writing stories. Follow the docs here: diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 921852addb8a..8770dbbce309 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -10,7 +10,7 @@ import styles from '../styles/styles'; import CheckboxWithLabel from '../components/CheckboxWithLabel'; import Text from '../components/Text'; import NetworkConnection from '../libs/NetworkConnection'; -import AddressSearch from '../components/AddressSearch/AddressSearch'; +import AddressSearch from '../components/AddressSearch'; /** * We use the Component Story Format for writing stories. Follow the docs here: From 7a3ea9ab60df64a5f2be5a328d1822aad7405663 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 6 Apr 2023 18:39:00 +0700 Subject: [PATCH 07/11] fix: remove redundant change --- src/pages/ReimbursementAccount/AddressForm.js | 2 +- src/pages/settings/Payments/AddDebitCardPage.js | 2 +- src/pages/settings/Profile/PersonalDetails/AddressPage.js | 2 +- src/stories/Form.stories.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index 9004552ef466..997ed10d2b4f 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -2,10 +2,10 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import TextInput from '../../components/TextInput'; +import AddressSearch from '../../components/AddressSearch'; import styles from '../../styles/styles'; import CONST from '../../CONST'; import StatePicker from '../../components/StatePicker'; -import AddressSearch from '../../components/AddressSearch'; const propTypes = { diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js index 6a6799e662f7..a8862154221a 100644 --- a/src/pages/settings/Payments/AddDebitCardPage.js +++ b/src/pages/settings/Payments/AddDebitCardPage.js @@ -18,10 +18,10 @@ import StatePicker from '../../../components/StatePicker'; import TextInput from '../../../components/TextInput'; import CONST from '../../../CONST'; import ONYXKEYS from '../../../ONYXKEYS'; +import AddressSearch from '../../../components/AddressSearch'; import * as ComponentUtils from '../../../libs/ComponentUtils'; import Form from '../../../components/Form'; import Permissions from '../../../libs/Permissions'; -import AddressSearch from '../../../components/AddressSearch'; const propTypes = { /* Onyx Props */ diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index 82cc70e9c92d..b594cd09f3a1 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -18,9 +18,9 @@ import Navigation from '../../../../libs/Navigation/Navigation'; import * as PersonalDetails from '../../../../libs/actions/PersonalDetails'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import compose from '../../../../libs/compose'; +import AddressSearch from '../../../../components/AddressSearch'; import CountryPicker from '../../../../components/CountryPicker'; import StatePicker from '../../../../components/StatePicker'; -import AddressSearch from '../../../../components/AddressSearch'; const propTypes = { /* Onyx Props */ diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js index 8770dbbce309..da684206f204 100644 --- a/src/stories/Form.stories.js +++ b/src/stories/Form.stories.js @@ -3,6 +3,7 @@ import {View} from 'react-native'; import TextInput from '../components/TextInput'; import Picker from '../components/Picker'; import StatePicker from '../components/StatePicker'; +import AddressSearch from '../components/AddressSearch'; import DatePicker from '../components/DatePicker'; import Form from '../components/Form'; import * as FormActions from '../libs/actions/FormActions'; @@ -10,7 +11,6 @@ import styles from '../styles/styles'; import CheckboxWithLabel from '../components/CheckboxWithLabel'; import Text from '../components/Text'; import NetworkConnection from '../libs/NetworkConnection'; -import AddressSearch from '../components/AddressSearch'; /** * We use the Component Story Format for writing stories. Follow the docs here: From ceace1449aa5e2593349a26181c492dfccd3a794 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 6 Apr 2023 21:57:35 +0700 Subject: [PATCH 08/11] fix: remove redundant change --- src/components/AddressSearch/index.js | 2 +- .../AddressSearch/resetDisplayListViewBorderOnBlur.js | 6 ++---- .../resetDisplayListViewBorderOnBlur.native.js | 6 ++---- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js index 185ac12c3e92..5b3db865a072 100644 --- a/src/components/AddressSearch/index.js +++ b/src/components/AddressSearch/index.js @@ -242,7 +242,7 @@ const AddressSearch = (props) => { shouldSaveDraft: props.shouldSaveDraft, onBlur: (event) => { resetDisplayListViewBorderOnBlur(event, containerRef, setDisplayListViewBorder); - props.onBlur(event); + props.onBlur(); }, autoComplete: 'off', onInputChange: (text) => { diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js index eb79e14e0913..b0e7c3fe65ad 100644 --- a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js +++ b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js @@ -1,4 +1,4 @@ -const resetDisplayListViewBorderOnBlur = (event, containerRef, setDisplayListViewBorder) => { +function 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. @@ -6,9 +6,7 @@ const resetDisplayListViewBorderOnBlur = (event, containerRef, setDisplayListVie return; } setDisplayListViewBorder(false); -}; - -resetDisplayListViewBorderOnBlur.displayName = 'resetDisplayListViewBorderOnBlur'; +} export default resetDisplayListViewBorderOnBlur; diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js index ab2282cff90d..e95f1f9c2550 100644 --- a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js +++ b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.native.js @@ -1,10 +1,8 @@ -const resetDisplayListViewBorderOnBlur = (event, containerRef, setDisplayListViewBorder) => { +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); -}; - -resetDisplayListViewBorderOnBlur.displayName = 'resetDisplayListViewBorderOnBlur'; +} export default resetDisplayListViewBorderOnBlur; From 245761824eaefec3a18de78ba47bf671038f75e8 Mon Sep 17 00:00:00 2001 From: tienifr Date: Thu, 6 Apr 2023 22:03:13 +0700 Subject: [PATCH 09/11] fix: change the order of params --- src/components/AddressSearch/index.js | 2 +- .../AddressSearch/resetDisplayListViewBorderOnBlur.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js index 5b3db865a072..afce1f66bc8f 100644 --- a/src/components/AddressSearch/index.js +++ b/src/components/AddressSearch/index.js @@ -241,7 +241,7 @@ const AddressSearch = (props) => { inputID: props.inputID, shouldSaveDraft: props.shouldSaveDraft, onBlur: (event) => { - resetDisplayListViewBorderOnBlur(event, containerRef, setDisplayListViewBorder); + resetDisplayListViewBorderOnBlur(setDisplayListViewBorder, event, containerRef); props.onBlur(); }, autoComplete: 'off', diff --git a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js index b0e7c3fe65ad..a4ebdcf5d8c1 100644 --- a/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js +++ b/src/components/AddressSearch/resetDisplayListViewBorderOnBlur.js @@ -1,4 +1,4 @@ -function resetDisplayListViewBorderOnBlur(event, containerRef, setDisplayListViewBorder) { +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. From 5b6748b38ac46c8d963c8f553983c3d9435024ef Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 24 Apr 2023 11:51:32 +0700 Subject: [PATCH 10/11] update react-native-google-places-autocomplete fork version --- package-lock.json | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1675b3a070a1..bc3086f10f04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -67,7 +67,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", @@ -138,7 +138,7 @@ "css-loader": "^6.7.2", "diff-so-fancy": "^1.3.0", "dotenv": "^16.0.3", - "electron": "^22.3.6", + "electron": "22.3.6", "electron-builder": "23.5.0", "electron-notarize": "^1.2.1", "eslint": "^7.6.0", @@ -34629,9 +34629,9 @@ } }, "node_modules/react-native-google-places-autocomplete": { - "version": "2.4.1", - "resolved": "git+ssh://git@github.com/Expensify/react-native-google-places-autocomplete.git#e12768f1542e7982d90f6449798f0d6b7f18f192", - "integrity": "sha512-Lk5/8qqzPoqx9ygfHSYtqXFvXiWIY+1tnyoWHVbpyTlPrJOcfkFrELCXaDlokJJqg1luvTLoMtEA1pkDfHYVUg==", + "version": "2.5.1", + "resolved": "git+ssh://git@github.com/Expensify/react-native-google-places-autocomplete.git#6f436a06a3018cb49750bb110b89df75f6a865d5", + "integrity": "sha512-7NiBK83VggJ2HQaHGfJoaPyxtiLu1chwP1VqH9te+PZtf0L9p50IuBQciW+4s173cBamt4U2+mvnCt7zfMFeDg==", "license": "MIT", "dependencies": { "lodash.debounce": "^4.0.8", @@ -64324,9 +64324,9 @@ } }, "react-native-google-places-autocomplete": { - "version": "git+ssh://git@github.com/Expensify/react-native-google-places-autocomplete.git#e12768f1542e7982d90f6449798f0d6b7f18f192", - "integrity": "sha512-Lk5/8qqzPoqx9ygfHSYtqXFvXiWIY+1tnyoWHVbpyTlPrJOcfkFrELCXaDlokJJqg1luvTLoMtEA1pkDfHYVUg==", - "from": "react-native-google-places-autocomplete@git+https://github.com/Expensify/react-native-google-places-autocomplete.git#e12768f1542e7982d90f6449798f0d6b7f18f192", + "version": "git+ssh://git@github.com/Expensify/react-native-google-places-autocomplete.git#6f436a06a3018cb49750bb110b89df75f6a865d5", + "integrity": "sha512-7NiBK83VggJ2HQaHGfJoaPyxtiLu1chwP1VqH9te+PZtf0L9p50IuBQciW+4s173cBamt4U2+mvnCt7zfMFeDg==", + "from": "react-native-google-places-autocomplete@git+https://github.com/Expensify/react-native-google-places-autocomplete.git#6f436a06a3018cb49750bb110b89df75f6a865d5", "requires": { "lodash.debounce": "^4.0.8", "prop-types": "^15.7.2", diff --git a/package.json b/package.json index 8a6a8abaf553..4ad63b0bf2cd 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,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", From bc6c8035b77ae950c101485f0d54fe047a017995 Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 24 Apr 2023 23:15:07 +0700 Subject: [PATCH 11/11] fix wrong import path --- src/components/AddressSearch/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js index dde33eee83c2..a270fc6dff9f 100644 --- a/src/components/AddressSearch/index.js +++ b/src/components/AddressSearch/index.js @@ -13,7 +13,7 @@ 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'; +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