[HOLD for payment 2022-11-11] [$250] mWeb- Search -Focus and keyboard dismissed when start searching second user reported by @rushatgabhane

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing #11673

Action Performed:

1. Go to staging.new.expensifail.com
2. Log in with your account
3. Select Fub menu - Select New Group
4. Type the user in search filed
5. Tap on the user
6. Go back to the search field
7. Search second user

Expected Result:

Able to search second user without any issues

Actual Result:

Focus and keyboard dismissed when start searching second user

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.2.14.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Screen_Recording_20221013-092717_Chrome.1.2.mp4

Expensify/Expensify Issue URL:

Issue reported by: rushatgabhane

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @marcochavezf (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[marcochavezf]

I reproduced this error on Chrome (Android), for some reason seems it happens when the search input loses the focus, it's focused again and the user types something.

[melvin-bot]

Triggered auto assignment to @sophiepintoraetz (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[melvin-bot]

Current assignee @marcochavezf is eligible for the External assigner, not assigning anyone new.

[mollfpr]

Proposal

Root cause
We scrolled the list whenever we select an option or the options list is changed.

App/src/components/OptionsSelector/BaseOptionsSelector.js

Line 198 in 7044ab2

this.list.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex});

We also settings the OptionList to dismiss the keyboard when the list is scrolled.

App/src/components/OptionsList/index.js

Line 11 in 7044ab2

keyboardDismissMode={props.isSmallScreenWidth ? 'on-drag' : 'none'}

So every time the scroll position is changed the keyboard will be dismissed.

Solution
Remove keyboardDismissMode and replace it with onScroll callback. We will dismiss the keyboard only when the user is touch scroll the list not when we scroll the list programmaticly.

diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/Opti
onsList/BaseOptionsList.js
index c8337b87a..3fe0d31b7 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -17,12 +17,15 @@ const propTypes = {
     /** Called when the user begins to drag the scroll view */
     onScrollBeginDrag: PropTypes.func,

+    onScroll: PropTypes.func,
+
     ...optionsListPropTypes,
 };

 const defaultProps = {
     keyboardDismissMode: 'none',
     onScrollBeginDrag: () => {},
+    onScroll: () => {},
     ...optionsListDefaultProps,
 };

@@ -229,6 +232,7 @@ class BaseOptionsList extends Component {
                     indicatorStyle="white"
                     keyboardShouldPersistTaps="always"
                     keyboardDismissMode={this.props.keyboardDismissMode}
+                    onScroll={this.props.onScroll}
                     onScrollBeginDrag={this.props.onScrollBeginDrag}
                     contentContainerStyle={this.props.contentContainerStyles}
                     showsVerticalScrollIndicator={false}

diff --git a/src/components/OptionsList/index.js b/src/components/OptionsList/in
dex.js
index 7db02df56..1e0d535b3 100644
--- a/src/components/OptionsList/index.js
+++ b/src/components/OptionsList/index.js
@@ -1,16 +1,48 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, useEffect} from 'react';
+import {Keyboard} from 'react-native';
 import BaseOptionsList from './BaseOptionsList';
 import withWindowDimensions from '../withWindowDimensions';
 import {propTypes, defaultProps} from './optionsListPropTypes';
+import canUseTouchScreen from '../../libs/canUseTouchscreen';

-const OptionsList = forwardRef((props, ref) => (
-    <BaseOptionsList
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-        keyboardDismissMode={props.isSmallScreenWidth ? 'on-drag' : 'none'}
-    />
-));
+let isScreenTouched = false;
+
+const OptionsList = forwardRef((props, ref) => {
+    useEffect(() => {
+        const onTouchStart = () => {
+            if (!canUseTouchScreen()) {
+                return;
+            }
+            isScreenTouched = true;
+        };
+
+        const onTouchEnd = () => {
+            isScreenTouched = false;
+        };
+
+        document.addEventListener('touchstart', onTouchStart);
+        document.addEventListener('touchend', onTouchEnd);
+
+        return () => {
+            document.removeEventListener('touchstart', onTouchStart);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
+    }, []);
+
+    return (
+        <BaseOptionsList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            onScroll={() => {
+                if (!isScreenTouched) {
+                    return;
+                }
+                Keyboard.dismiss();
+            }}
+        />
+    );
+});

 OptionsList.propTypes = propTypes;
 OptionsList.defaultProps = defaultProps;

Result

Screen.Recording.2022-10-14.at.13.34.38.mov

screen-recording-2022-10-14-at-132211_RHvhGArz.mp4

[melvin-bot]

@marcochavezf, @eVoloshchak, @sophiepintoraetz Whoops! This issue is 2 days overdue. Let's get this updated quick!