Merge pull request #8535 from rushatgabhane/fix-6069

Fix Input is lost upon opening search page
Expensify · Apr 21, 2022 · 32d8f02 · 32d8f02
2 parents 0d97ece + 36db09a
commit 32d8f02
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 30 deletions.
diff --git a/src/components/OptionsSelector.js b/src/components/OptionsSelector.js
@@ -8,6 +8,7 @@ import styles from '../styles/styles';
 import optionPropTypes from './optionPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import TextInput from './TextInput';
+import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 
 const propTypes = {
     /** Wether we should wait before focusing the TextInput, useful when using transitions  */
@@ -70,6 +71,9 @@ const propTypes = {
     /** Whether to autofocus the search input on mount */
     autoFocus: PropTypes.bool,
 
+    /** Whether to show options list */
+    shouldShowOptions: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -87,6 +91,7 @@ const defaultProps = {
     showTitleTooltip: false,
     shouldFocusOnSelectRow: false,
     autoFocus: true,
+    shouldShowOptions: true,
 };
 
 class OptionsSelector extends Component {
@@ -131,6 +136,10 @@ class OptionsSelector extends Component {
      * @param {SyntheticEvent} e
      */
     handleKeyPress(e) {
+        if (!this.list) {
+            return;
+        }
+
         // We are mapping over all the options to combine them into a single array and also saving the section index
         // index within that section so we can navigate
         const allOptions = _.reduce(this.props.sections, (options, section, sectionIndex) => (
@@ -238,21 +247,25 @@ class OptionsSelector extends Component {
                         selectTextOnFocus
                     />
                 </View>
-                <OptionsList
-                    ref={el => this.list = el}
-                    optionHoveredStyle={styles.hoveredComponentBG}
-                    onSelectRow={this.selectRow}
-                    sections={this.props.sections}
-                    focusedIndex={this.state.focusedIndex}
-                    selectedOptions={this.props.selectedOptions}
-                    canSelectMultipleOptions={this.props.canSelectMultipleOptions}
-                    hideSectionHeaders={this.props.hideSectionHeaders}
-                    headerMessage={this.props.headerMessage}
-                    disableFocusOptions={this.props.disableArrowKeysActions}
-                    hideAdditionalOptionStates={this.props.hideAdditionalOptionStates}
-                    forceTextUnreadStyle={this.props.forceTextUnreadStyle}
-                    showTitleTooltip={this.props.showTitleTooltip}
-                />
+                {this.props.shouldShowOptions
+                    ? (
+                        <OptionsList
+                            ref={el => this.list = el}
+                            optionHoveredStyle={styles.hoveredComponentBG}
+                            onSelectRow={this.selectRow}
+                            sections={this.props.sections}
+                            focusedIndex={this.state.focusedIndex}
+                            selectedOptions={this.props.selectedOptions}
+                            canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                            hideSectionHeaders={this.props.hideSectionHeaders}
+                            headerMessage={this.props.headerMessage}
+                            disableFocusOptions={this.props.disableArrowKeysActions}
+                            hideAdditionalOptionStates={this.props.hideAdditionalOptionStates}
+                            forceTextUnreadStyle={this.props.forceTextUnreadStyle}
+                            showTitleTooltip={this.props.showTitleTooltip}
+                        />
+                    )
+                    : <FullScreenLoadingIndicator />}
             </View>
         );
     }

diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.js
@@ -1,5 +1,6 @@
 import {Animated} from 'react-native';
 import variables from '../../../styles/variables';
+import getCardStyles from '../../../styles/cardStyles';
 
 export default (
     isSmallScreenWidth,
@@ -19,7 +20,7 @@ export default (
     }), inverted);
 
     const opacity = Animated.multiply(progress, inverted);
-    const cardStyle = {};
+    const cardStyle = getCardStyles(isSmallScreenWidth, screen.width);
 
     if (isFullScreenModal && !isSmallScreenWidth) {
         cardStyle.opacity = opacity;

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
@@ -16,7 +16,6 @@ import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import Timing from '../libs/actions/Timing';
 import CONST from '../CONST';
-import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 import personalDetailsPropType from './personalDetailsPropType';
@@ -177,19 +176,17 @@ class SearchPage extends Component {
                             onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
                         <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            {!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
-                            {didScreenTransitionEnd && (
-                                <OptionsSelector
-                                    sections={sections}
-                                    value={this.state.searchValue}
-                                    onSelectRow={this.selectReport}
-                                    onChangeText={this.onChangeText}
-                                    headerMessage={headerMessage}
-                                    hideSectionHeaders
-                                    hideAdditionalOptionStates
-                                    showTitleTooltip
-                                />
-                            )}
+                            <OptionsSelector
+                                sections={sections}
+                                value={this.state.searchValue}
+                                onSelectRow={this.selectReport}
+                                onChangeText={this.onChangeText}
+                                headerMessage={headerMessage}
+                                hideSectionHeaders
+                                hideAdditionalOptionStates
+                                showTitleTooltip
+                                shouldShowOptions={didScreenTransitionEnd}
+                            />
                         </View>
                         <KeyboardSpacer />
                     </>

diff --git a/src/styles/cardStyles/index.js b/src/styles/cardStyles/index.js
@@ -0,0 +1,16 @@
+import variables from '../variables';
+
+/**
+ * Get card style for cardStyleInterpolator
+ * @param {Boolean} isSmallScreenWidth
+ * @param {Number} screenWidth
+ * @returns {Object}
+ */
+export default function getCardStyles(isSmallScreenWidth, screenWidth) {
+    return {
+        position: 'fixed',
+        width: isSmallScreenWidth ? screenWidth : variables.sideBarWidth,
+        right: 0,
+        height: '100%',
+    };
+}
diff --git a/src/styles/cardStyles/index.native.js b/src/styles/cardStyles/index.native.js
@@ -0,0 +1,3 @@
+export default function getCardStyles() {
+    return {};
+}