Merge pull request #51068 from QichenZhu/fix/44245

Prevent selection list from losing focus
Expensify · Nov 6, 2024 · 580bf69 · 580bf69
2 parents 80f6d65 + 73b14b1
commit 580bf69
Show file tree

Hide file tree

Showing 17 changed files with 262 additions and 103 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -173,7 +173,7 @@
     "react-native-url-polyfill": "^2.0.0",
     "react-native-view-shot": "3.8.0",
     "react-native-vision-camera": "4.0.0-beta.13",
-    "react-native-web": "^0.19.12",
+    "react-native-web": "0.19.13",
     "react-native-webview": "13.8.6",
     "react-plaid-link": "3.3.2",
     "react-web-config": "^1.0.0",

diff --git a/...eact-native-web+0.19.12+001+initial.patch → ...eact-native-web+0.19.13+001+initial.patch b/...eact-native-web+0.19.12+001+initial.patch → ...eact-native-web+0.19.13+001+initial.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
-index e137def..c3e5054 100644
+index 1f52b73..53b1a83 100644
 --- a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
 +++ b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
-@@ -285,7 +285,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -287,7 +287,7 @@ class VirtualizedList extends StateSafePureComponent {
    // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
 
    constructor(_props) {
@@ -11,7 +11,7 @@ index e137def..c3e5054 100644
      super(_props);
      this._getScrollMetrics = () => {
        return this._scrollMetrics;
-@@ -520,6 +520,11 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -522,6 +522,11 @@ class VirtualizedList extends StateSafePureComponent {
          visibleLength,
          zoomScale
        };
@@ -23,7 +23,7 @@ index e137def..c3e5054 100644
        this._updateViewableItems(this.props, this.state.cellsAroundViewport);
        if (!this.props) {
          return;
-@@ -569,7 +574,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -571,7 +576,7 @@ class VirtualizedList extends StateSafePureComponent {
      this._updateCellsToRender = () => {
        this._updateViewableItems(this.props, this.state.cellsAroundViewport);
        this.setState((state, props) => {
@@ -32,7 +32,7 @@ index e137def..c3e5054 100644
          var renderMask = VirtualizedList._createRenderMask(props, cellsAroundViewport, this._getNonViewportRenderRegions(props));
          if (cellsAroundViewport.first === state.cellsAroundViewport.first && cellsAroundViewport.last === state.cellsAroundViewport.last && renderMask.equals(state.renderMask)) {
            return null;
-@@ -589,7 +594,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -591,7 +596,7 @@ class VirtualizedList extends StateSafePureComponent {
        return {
          index,
          item,
@@ -41,7 +41,7 @@ index e137def..c3e5054 100644
          isViewable
        };
      };
-@@ -621,12 +626,10 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -623,12 +628,10 @@ class VirtualizedList extends StateSafePureComponent {
      };
      this._getFrameMetrics = (index, props) => {
        var data = props.data,
@@ -55,7 +55,7 @@ index e137def..c3e5054 100644
        if (!frame || frame.index !== index) {
          if (getItemLayout) {
            /* $FlowFixMe[prop-missing] (>=0.63.0 site=react_native_fb) This comment
-@@ -650,7 +653,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -652,7 +655,7 @@ class VirtualizedList extends StateSafePureComponent {
 
        // The last cell we rendered may be at a new index. Bail if we don't know
        // where it is.
@@ -64,7 +64,7 @@ index e137def..c3e5054 100644
          return [];
        }
        var first = focusedCellIndex;
-@@ -690,9 +693,15 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -692,9 +695,15 @@ class VirtualizedList extends StateSafePureComponent {
        }
      }
      var initialRenderRegion = VirtualizedList._initialRenderRegion(_props);
@@ -81,7 +81,7 @@ index e137def..c3e5054 100644
      };
 
      // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
-@@ -748,6 +757,26 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -750,6 +759,26 @@ class VirtualizedList extends StateSafePureComponent {
        }
      }
    }
@@ -108,7 +108,7 @@ index e137def..c3e5054 100644
    static _createRenderMask(props, cellsAroundViewport, additionalRegions) {
      var itemCount = props.getItemCount(props.data);
      invariant(cellsAroundViewport.first >= 0 && cellsAroundViewport.last >= cellsAroundViewport.first - 1 && cellsAroundViewport.last < itemCount, "Invalid cells around viewport \"[" + cellsAroundViewport.first + ", " + cellsAroundViewport.last + "]\" was passed to VirtualizedList._createRenderMask");
-@@ -796,7 +825,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -798,7 +827,7 @@ class VirtualizedList extends StateSafePureComponent {
        }
      }
    }
@@ -117,7 +117,7 @@ index e137def..c3e5054 100644
      var data = props.data,
        getItemCount = props.getItemCount;
      var onEndReachedThreshold = onEndReachedThresholdOrDefault(props.onEndReachedThreshold);
-@@ -819,17 +848,9 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -821,17 +850,9 @@ class VirtualizedList extends StateSafePureComponent {
          last: Math.min(cellsAroundViewport.last + renderAhead, getItemCount(data) - 1)
        };
      } else {
@@ -138,7 +138,7 @@ index e137def..c3e5054 100644
          return cellsAroundViewport.last >= getItemCount(data) ? VirtualizedList._constrainToItemCount(cellsAroundViewport, props) : cellsAroundViewport;
        }
        newCellsAroundViewport = computeWindowedRenderLimits(props, maxToRenderPerBatchOrDefault(props.maxToRenderPerBatch), windowSizeOrDefault(props.windowSize), cellsAroundViewport, this.__getFrameMetricsApprox, this._scrollMetrics);
-@@ -902,16 +923,36 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -904,16 +925,36 @@ class VirtualizedList extends StateSafePureComponent {
      }
    }
    static getDerivedStateFromProps(newProps, prevState) {
@@ -177,7 +177,7 @@ index e137def..c3e5054 100644
      };
    }
    _pushCells(cells, stickyHeaderIndices, stickyIndicesFromProps, first, last, inversionStyle) {
-@@ -934,7 +975,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -936,7 +977,7 @@ class VirtualizedList extends StateSafePureComponent {
      last = Math.min(end, last);
      var _loop = function _loop() {
        var item = getItem(data, ii);
@@ -186,7 +186,7 @@ index e137def..c3e5054 100644
        _this._indicesToKeys.set(ii, key);
        if (stickyIndicesFromProps.has(ii + stickyOffset)) {
          stickyHeaderIndices.push(cells.length);
-@@ -969,20 +1010,23 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -971,20 +1012,23 @@ class VirtualizedList extends StateSafePureComponent {
    }
    static _constrainToItemCount(cells, props) {
      var itemCount = props.getItemCount(props.data);
@@ -216,8 +216,8 @@ index e137def..c3e5054 100644
      if (props.keyExtractor != null) {
        return props.keyExtractor(item, index);
      }
-@@ -1022,7 +1066,12 @@ class VirtualizedList extends StateSafePureComponent {
-       cells.push( /*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, {
+@@ -1024,7 +1068,12 @@ class VirtualizedList extends StateSafePureComponent {
+       cells.push(/*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, {
          cellKey: this._getCellKey() + '-header',
          key: "$header"
 -      }, /*#__PURE__*/React.createElement(View, {
@@ -230,7 +230,7 @@ index e137def..c3e5054 100644
          onLayout: this._onLayoutHeader,
          style: [inversionStyle, this.props.ListHeaderComponentStyle]
        },
-@@ -1124,7 +1173,11 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1126,7 +1175,11 @@ class VirtualizedList extends StateSafePureComponent {
        // TODO: Android support
        invertStickyHeaders: this.props.invertStickyHeaders !== undefined ? this.props.invertStickyHeaders : this.props.inverted,
        stickyHeaderIndices,
@@ -243,7 +243,7 @@ index e137def..c3e5054 100644
      });
      this._hasMore = this.state.cellsAroundViewport.last < itemCount - 1;
      var innerRet = /*#__PURE__*/React.createElement(VirtualizedListContextProvider, {
-@@ -1317,8 +1370,12 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1319,8 +1372,12 @@ class VirtualizedList extends StateSafePureComponent {
        onStartReached = _this$props8.onStartReached,
        onStartReachedThreshold = _this$props8.onStartReachedThreshold,
        onEndReached = _this$props8.onEndReached,
@@ -258,7 +258,7 @@ index e137def..c3e5054 100644
      var _this$_scrollMetrics2 = this._scrollMetrics,
        contentLength = _this$_scrollMetrics2.contentLength,
        visibleLength = _this$_scrollMetrics2.visibleLength,
-@@ -1358,16 +1415,10 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1360,16 +1417,10 @@ class VirtualizedList extends StateSafePureComponent {
      // and call onStartReached only once for a given content length,
      // and only if onEndReached is not being executed
      else if (onStartReached != null && this.state.cellsAroundViewport.first === 0 && isWithinStartThreshold && this._scrollMetrics.contentLength !== this._sentStartForContentLength) {
@@ -279,7 +279,7 @@ index e137def..c3e5054 100644
      }
 
      // If the user scrolls away from the start or end and back again,
-@@ -1433,6 +1484,11 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1435,6 +1486,11 @@ class VirtualizedList extends StateSafePureComponent {
     */
 
    _updateViewableItems(props, cellsAroundViewport) {

diff --git a/...ative-web+0.19.12+002+fixLastSpacer.patch → ...ative-web+0.19.13+002+fixLastSpacer.patch b/...ative-web+0.19.12+002+fixLastSpacer.patch → ...ative-web+0.19.13+002+fixLastSpacer.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-web/dist/modules/AccessibilityUtil/propsToAccessibilityComponent.js b/node_modules/react-native-web/dist/modules/AccessibilityUtil/propsToAccessibilityComponent.js
-index 9c9a533..7794181 100644
+index 7d1d587..de51afe 100644
 --- a/node_modules/react-native-web/dist/modules/AccessibilityUtil/propsToAccessibilityComponent.js
 +++ b/node_modules/react-native-web/dist/modules/AccessibilityUtil/propsToAccessibilityComponent.js
 @@ -27,7 +27,8 @@ var roleComponents = {
@@ -13,7 +13,7 @@ index 9c9a533..7794181 100644
  var emptyObject = {};
  var propsToAccessibilityComponent = function propsToAccessibilityComponent(props) {
 diff --git a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
-index 7f6c880..b05da08 100644
+index 53b1a83..5689220 100644
 --- a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
 +++ b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
 @@ -78,14 +78,6 @@ function scrollEventThrottleOrDefault(scrollEventThrottle) {
@@ -31,7 +31,7 @@ index 7f6c880..b05da08 100644
 
  /**
   * Base implementation for the more convenient [`<FlatList>`](https://reactnative.dev/docs/flatlist)
-@@ -1107,7 +1099,8 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1109,7 +1101,8 @@ class VirtualizedList extends StateSafePureComponent {
        _keylessItemComponentName = '';
        var spacerKey = this._getSpacerKey(!horizontal);
        var renderRegions = this.state.renderMask.enumerateRegions();

diff --git a/...eb+0.19.12+003+image-header-support.patch → ...eb+0.19.13+003+image-header-support.patch b/...eb+0.19.12+003+image-header-support.patch → ...eb+0.19.13+003+image-header-support.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-native-web/dist/exports/Image/index.js b/node_modules/react-native-web/dist/exports/Image/index.js
-index 9649d27..66ef95c 100644
+index 348831d..ca40ee8 100644
 --- a/node_modules/react-native-web/dist/exports/Image/index.js
 +++ b/node_modules/react-native-web/dist/exports/Image/index.js
-@@ -135,7 +135,22 @@ function resolveAssetUri(source) {
+@@ -137,7 +137,22 @@ function resolveAssetUri(source) {
    }
    return uri;
  }
@@ -13,7 +13,7 @@ index 9649d27..66ef95c 100644
 +  if (onError) {
 +    onError({
 +      nativeEvent: {
-+        error: "Failed to load resource " + uri + " (404)"
++        error: "Failed to load resource " + uri
 +      }
 +    });
 +  }
@@ -26,14 +26,14 @@ index 9649d27..66ef95c 100644
    var _ariaLabel = props['aria-label'],
      accessibilityLabel = props.accessibilityLabel,
      blurRadius = props.blurRadius,
-@@ -238,16 +253,10 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+@@ -240,16 +255,10 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
          }
        }, function error() {
          updateState(ERRORED);
 -        if (onError) {
 -          onError({
 -            nativeEvent: {
--              error: "Failed to load resource " + uri + " (404)"
+-              error: "Failed to load resource " + uri
 -            }
 -          });
 -        }
@@ -47,7 +47,7 @@ index 9649d27..66ef95c 100644
        });
      }
      function abortPendingRequest() {
-@@ -279,10 +288,79 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+@@ -281,10 +290,79 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
      suppressHydrationWarning: true
    }), hiddenImage, createTintColorSVG(tintColor, filterRef.current));
  });

diff --git a/...web+0.19.12+004+fixPointerEventDown.patch → ...web+0.19.13+004+fixPointerEventDown.patch b/...web+0.19.12+004+fixPointerEventDown.patch → ...web+0.19.13+004+fixPointerEventDown.patch
diff --git a/...ive-web+0.19.12+005+osr-improvement.patch → ...ive-web+0.19.13+005+osr-improvement.patch b/...ive-web+0.19.12+005+osr-improvement.patch → ...ive-web+0.19.13+005+osr-improvement.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
-index bede95b..2aef4c6 100644
+index 5689220..df40877 100644
 --- a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
 +++ b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js
-@@ -332,7 +332,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -334,7 +334,7 @@ class VirtualizedList extends StateSafePureComponent {
        zoomScale: 1
      };
      this._scrollRef = null;
@@ -11,7 +11,7 @@ index bede95b..2aef4c6 100644
      this._sentEndForContentLength = 0;
      this._totalCellLength = 0;
      this._totalCellsMeasured = 0;
-@@ -684,16 +684,18 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -686,16 +686,18 @@ class VirtualizedList extends StateSafePureComponent {
          });
        }
      }
@@ -32,7 +32,7 @@ index bede95b..2aef4c6 100644
      };
 
      // REACT-NATIVE-WEB patch to preserve during future RN merges: Support inverted wheel scroller.
-@@ -919,13 +921,13 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -921,13 +923,13 @@ class VirtualizedList extends StateSafePureComponent {
      // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make
      // sure we're rendering a reasonable range here.
      var itemCount = newProps.getItemCount(newProps.data);
@@ -48,7 +48,7 @@ index bede95b..2aef4c6 100644
      if (newProps.maintainVisibleContentPosition != null && prevFirstVisibleItemKey != null && newFirstVisibleItemKey != null) {
        if (newFirstVisibleItemKey !== prevFirstVisibleItemKey) {
          // Fast path if items were added at the start of the list.
-@@ -944,7 +946,8 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -946,7 +948,8 @@ class VirtualizedList extends StateSafePureComponent {
        cellsAroundViewport: constrainedCells,
        renderMask: VirtualizedList._createRenderMask(newProps, constrainedCells),
        firstVisibleItemKey: newFirstVisibleItemKey,
@@ -58,7 +58,7 @@ index bede95b..2aef4c6 100644
      };
    }
    _pushCells(cells, stickyHeaderIndices, stickyIndicesFromProps, first, last, inversionStyle) {
-@@ -1220,7 +1223,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1222,7 +1225,7 @@ class VirtualizedList extends StateSafePureComponent {
        return ret;
      }
    }
@@ -67,7 +67,7 @@ index bede95b..2aef4c6 100644
      var _this$props7 = this.props,
        data = _this$props7.data,
        extraData = _this$props7.extraData;
-@@ -1244,6 +1247,11 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1246,6 +1249,11 @@ class VirtualizedList extends StateSafePureComponent {
      if (hiPriInProgress) {
        this._hiPriInProgress = false;
      }
@@ -79,7 +79,7 @@ index bede95b..2aef4c6 100644
    }
 
    // Used for preventing scrollToIndex from being called multiple times for initialScrollIndex
-@@ -1407,8 +1415,8 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1409,8 +1417,8 @@ class VirtualizedList extends StateSafePureComponent {
      // Next check if the user just scrolled within the start threshold
      // and call onStartReached only once for a given content length,
      // and only if onEndReached is not being executed
@@ -90,7 +90,7 @@ index bede95b..2aef4c6 100644
        onStartReached({
          distanceFromStart
        });
-@@ -1417,7 +1425,7 @@ class VirtualizedList extends StateSafePureComponent {
+@@ -1419,7 +1427,7 @@ class VirtualizedList extends StateSafePureComponent {
      // If the user scrolls away from the start or end and back again,
      // cause onStartReached or onEndReached to be triggered again
      else {
@@ -100,7 +100,7 @@ index bede95b..2aef4c6 100644
      }
    }
 diff --git a/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js
-index 459f017..d20115c 100644
+index 459f017..fb2d269 100644
 --- a/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js
 +++ b/node_modules/react-native-web/src/vendor/react-native/VirtualizedList/index.js
 @@ -79,6 +79,7 @@ type State = {

diff --git a/...12+006+remove focus trap from modal.patch → ...13+006+remove-focus-trap-from-modal.patch b/...12+006+remove focus trap from modal.patch → ...13+006+remove-focus-trap-from-modal.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-native-web/dist/exports/Modal/index.js b/node_modules/react-native-web/dist/exports/Modal/index.js
-index d5df021..e2c46cf 100644
+index a9a7c36..522ef93 100644
 --- a/node_modules/react-native-web/dist/exports/Modal/index.js
 +++ b/node_modules/react-native-web/dist/exports/Modal/index.js
-@@ -86,13 +86,11 @@ var Modal = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+@@ -88,13 +88,11 @@ var Modal = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
      onDismiss: onDismissCallback,
      onShow: onShowCallback,
      visible: visible

diff --git a/...2+007+fix-scrollable-overflown-text.patch → ...3+007+fix-scrollable-overflown-text.patch b/...2+007+fix-scrollable-overflown-text.patch → ...3+007+fix-scrollable-overflown-text.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-native-web/dist/exports/Text/index.js b/node_modules/react-native-web/dist/exports/Text/index.js
-index 8c5f79b..4a47f80 100644
+index 4130386..1076f55 100644
 --- a/node_modules/react-native-web/dist/exports/Text/index.js
 +++ b/node_modules/react-native-web/dist/exports/Text/index.js
-@@ -166,7 +166,7 @@ var styles = StyleSheet.create({
+@@ -176,7 +176,7 @@ var styles = StyleSheet.create({
    textMultiLine: {
      display: '-webkit-box',
      maxWidth: '100%',
@@ -12,10 +12,10 @@ index 8c5f79b..4a47f80 100644
      WebkitBoxOrient: 'vertical'
    },
 diff --git a/node_modules/react-native-web/src/exports/Text/index.js b/node_modules/react-native-web/src/exports/Text/index.js
-index 071ae10..e43042c 100644
+index f79e82c..f27ccec 100644
 --- a/node_modules/react-native-web/src/exports/Text/index.js
 +++ b/node_modules/react-native-web/src/exports/Text/index.js
-@@ -219,7 +219,7 @@ const styles = StyleSheet.create({
+@@ -223,7 +223,7 @@ const styles = StyleSheet.create({
    textMultiLine: {
      display: '-webkit-box',
      maxWidth: '100%',

diff --git a/src/CONST.ts b/src/CONST.ts
@@ -1275,6 +1275,7 @@ const CONST = {
         UNREAD_UPDATE_DEBOUNCE_TIME: 300,
         SEARCH_FILTER_OPTIONS: 'search_filter_options',
         USE_DEBOUNCED_STATE_DELAY: 300,
+        LIST_SCROLLING_DEBOUNCE_TIME: 200,
     },
     PRIORITY_MODE: {
         GSD: 'gsd',