Merge pull request #12057 from mollfpr/fix-options-list-input-unfocus

Fix options list input unfocus

src/components/OptionsList/BaseOptionsList.js

@@ -17,12 +17,16 @@ const propTypes = {
     /** Called when the user begins to drag the scroll view */
     onScrollBeginDrag: PropTypes.func,
 
+    /** Callback executed on scroll */
+    onScroll: PropTypes.func,
+
     ...optionsListPropTypes,
 };
 
 const defaultProps = {
     keyboardDismissMode: 'none',
     onScrollBeginDrag: () => {},
+    onScroll: () => {},
     ...optionsListDefaultProps,
 };
 
@@ -230,6 +234,7 @@ class BaseOptionsList extends Component {
                     keyboardShouldPersistTaps="always"
                     keyboardDismissMode={this.props.keyboardDismissMode}
                     onScrollBeginDrag={this.props.onScrollBeginDrag}
+                    onScroll={this.props.onScroll}
                     contentContainerStyle={this.props.contentContainerStyles}
                     showsVerticalScrollIndicator={false}
                     sections={this.props.sections}

src/components/OptionsList/index.js

@@ -1,19 +1,71 @@
-import React, {forwardRef} from 'react';
+import React, {Component, forwardRef} from 'react';
+import {Keyboard} from 'react-native';
+import _ from 'underscore';
 import BaseOptionsList from './BaseOptionsList';
 import withWindowDimensions from '../withWindowDimensions';
+import canUseTouchscreen from '../../libs/canUseTouchscreen';
 import {propTypes, defaultProps} from './optionsListPropTypes';
 
-const OptionsList = forwardRef((props, ref) => (
-    <BaseOptionsList
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-        keyboardDismissMode={props.isSmallScreenWidth ? 'on-drag' : 'none'}
-    />
-));
+class OptionsList extends Component {
+    constructor(props) {
+        super(props);
 
-OptionsList.propTypes = propTypes;
+        this.touchStart = this.touchStart.bind(this);
+        this.touchEnd = this.touchEnd.bind(this);
+    }
+
+    componentDidMount() {
+        if (!canUseTouchscreen()) {
+            return;
+        }
+
+        // We're setting `isScreenTouched` in this listener only for web platforms with touchscreen (mWeb) where
+        // we want to dismiss the keyboard only when the list is scrolled by the user and not when it's scrolled programmatically.
+        document.addEventListener('touchstart', this.touchStart);
+        document.addEventListener('touchend', this.touchEnd);
+    }
+
+    componentWillUnmount() {
+        if (!canUseTouchscreen()) {
+            return;
+        }
+
+        document.removeEventListener('touchstart', this.touchStart);
+        document.removeEventListener('touchend', this.touchEnd);
+    }
+
+    touchStart() {
+        this.isScreenTouched = true;
+    }
+
+    touchEnd() {
+        this.isScreenTouched = false;
+    }
+
+    render() {
+        return (
+            <BaseOptionsList
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {..._.omit(this.props, 'forwardedRef')}
+                ref={this.props.forwardedRef}
+                onScroll={() => {
+                    // Only dismiss the keyboard whenever the user scrolls the screen
+                    if (!this.isScreenTouched) {
+                        return;
+                    }
+                    Keyboard.dismiss();
+                }}
+            />
+        );
+    }
+}
+
+OptionsList.propTypes = {
+    ...propTypes,
+};
 OptionsList.defaultProps = defaultProps;
-OptionsList.displayName = 'OptionsList';
 
-export default withWindowDimensions(OptionsList);
+export default withWindowDimensions(forwardRef((props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <OptionsList forwardedRef={ref} {...props} />
+)));