From 25d9c348b5f1b12b3827537e5c396bd65e9badff Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Tue, 13 Jun 2023 10:14:14 +0700
Subject: [PATCH 1/2] add shouldTriggerArrowDownWhenMaxIndexExceeded inn
 ArrowKeyFocusManager to determine whenever arrow down action is triggered or
 not when the maximum participant number is exceeded

---
 src/components/ArrowKeyFocusManager.js                | 6 +++++-
 src/components/OptionsSelector/BaseOptionsSelector.js | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js
index 10dfdf3d1111..c615cb9b560f 100644
--- a/src/components/ArrowKeyFocusManager.js
+++ b/src/components/ArrowKeyFocusManager.js
@@ -21,11 +21,15 @@ const propTypes = {
 
     /** If this value is true, then we exclude TextArea Node. */
     shouldExcludeTextAreaNodes: PropTypes.bool,
+
+    /** If this value is true, then the arrow down callback would be triggered when the max index is exceeded */
+    shouldTriggerArrowDownWhenMaxIndexExceeded: PropTypes.bool,
 };
 
 const defaultProps = {
     disabledIndexes: [],
     shouldExcludeTextAreaNodes: true,
+    shouldTriggerArrowDownWhenMaxIndexExceeded: true,
 };
 
 class ArrowKeyFocusManager extends Component {
@@ -57,7 +61,7 @@ class ArrowKeyFocusManager extends Component {
         if (prevProps.maxIndex === this.props.maxIndex) {
             return;
         }
-        if (this.props.focusedIndex > this.props.maxIndex) {
+        if (this.props.focusedIndex > this.props.maxIndex && this.props.shouldTriggerArrowDownWhenMaxIndexExceeded) {
             this.onArrowDownKey();
         }
     }
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index f64c5975b986..2f06a1b9655e 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -345,6 +345,7 @@ class BaseOptionsSelector extends Component {
                 focusedIndex={this.state.focusedIndex}
                 maxIndex={this.state.allOptions.length - 1}
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
+                shouldTriggerArrowDownWhenMaxIndexExceeded={false}
             >
                 <View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto]}>
                     {this.props.shouldTextInputAppearBelowOptions ? (

From 0e427cfd6a5d20d250ed1ddfadeaeb402c578253 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Thu, 15 Jun 2023 15:13:11 +0700
Subject: [PATCH 2/2] fix: rename props

---
 src/components/ArrowKeyFocusManager.js                | 6 +++---
 src/components/OptionsSelector/BaseOptionsSelector.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ArrowKeyFocusManager.js b/src/components/ArrowKeyFocusManager.js
index c615cb9b560f..b8c726e75af6 100644
--- a/src/components/ArrowKeyFocusManager.js
+++ b/src/components/ArrowKeyFocusManager.js
@@ -23,13 +23,13 @@ const propTypes = {
     shouldExcludeTextAreaNodes: PropTypes.bool,
 
     /** If this value is true, then the arrow down callback would be triggered when the max index is exceeded */
-    shouldTriggerArrowDownWhenMaxIndexExceeded: PropTypes.bool,
+    shouldResetIndexOnEndReached: PropTypes.bool,
 };
 
 const defaultProps = {
     disabledIndexes: [],
     shouldExcludeTextAreaNodes: true,
-    shouldTriggerArrowDownWhenMaxIndexExceeded: true,
+    shouldResetIndexOnEndReached: true,
 };
 
 class ArrowKeyFocusManager extends Component {
@@ -61,7 +61,7 @@ class ArrowKeyFocusManager extends Component {
         if (prevProps.maxIndex === this.props.maxIndex) {
             return;
         }
-        if (this.props.focusedIndex > this.props.maxIndex && this.props.shouldTriggerArrowDownWhenMaxIndexExceeded) {
+        if (this.props.focusedIndex > this.props.maxIndex && this.props.shouldResetIndexOnEndReached) {
             this.onArrowDownKey();
         }
     }
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 2f06a1b9655e..0311af867a1e 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -345,7 +345,7 @@ class BaseOptionsSelector extends Component {
                 focusedIndex={this.state.focusedIndex}
                 maxIndex={this.state.allOptions.length - 1}
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
-                shouldTriggerArrowDownWhenMaxIndexExceeded={false}
+                shouldResetIndexOnEndReached={false}
             >
                 <View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto]}>
                     {this.props.shouldTextInputAppearBelowOptions ? (