From a2565363f7f6e8434f752cad83c43a46549dfaf1 Mon Sep 17 00:00:00 2001
From: AHMED <a.s1171111@gmail.com>
Date: Fri, 25 Feb 2022 20:17:27 +0200
Subject: [PATCH 1/7] pypass pressOnEnter when textArea active

---
 src/components/Button.js                    | 31 +++++++++++++++------
 src/components/FormAlertWithSubmitButton.js |  6 +++-
 src/pages/workspace/WorkspaceInvitePage.js  |  4 +++
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 6c826576c69..11c9e860ebf 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -116,15 +116,17 @@ class Button extends Component {
             return;
         }
 
-        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
+        this.subscribeEnterKey();
+    }
 
-        // Setup and attach keypress handler for pressing the button with Enter key
-        this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
-            if (this.props.isDisabled || this.props.isLoading) {
-                return;
-            }
-            this.props.onPress();
-        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
+    componentDidUpdate() {
+        // switch the keyboard listener on/off if pressOnEnter change.
+        if (!this.unsubscribe) {
+            this.subscribeEnterKey();
+        } else if (!this.props.pressOnEnter) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
     }
 
     componentWillUnmount() {
@@ -135,6 +137,19 @@ class Button extends Component {
         this.unsubscribe();
     }
 
+    /**
+     * Setup and attach keypress handler for pressing the button with Enter key
+     */
+    subscribeEnterKey() {
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
+        this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
+            if (this.props.isDisabled || this.props.isLoading) {
+                return;
+            }
+            this.props.onPress();
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, this.props.pressOnEnter);
+    }
+
     renderContent() {
         const ContentComponent = this.props.ContentComponent;
         if (ContentComponent) {
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 9c90472b016..9adbd7745fa 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -40,6 +40,9 @@ const propTypes = {
     /** Is the button in a loading state */
     isLoading: PropTypes.bool,
 
+    /** Call the onPress function when Enter key is pressed */
+    pressOnEnter: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -49,6 +52,7 @@ const defaultProps = {
     isMessageHtml: false,
     containerStyles: [],
     isLoading: false,
+    pressOnEnter: true,
 };
 
 const FormAlertWithSubmitButton = (props) => {
@@ -104,7 +108,7 @@ const FormAlertWithSubmitButton = (props) => {
             )}
             <Button
                 success
-                pressOnEnter
+                pressOnEnter={props.pressOnEnter}
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index b63dceec52e..5dc886b914f 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -82,6 +82,7 @@ class WorkspaceInvitePage extends React.Component {
             selectedOptions: [],
             userToInvite,
             welcomeNote: this.getWelcomeNote(),
+            pressOnEnter: true,
         };
     }
 
@@ -300,6 +301,8 @@ class WorkspaceInvitePage extends React.Component {
                                     containerStyles={[styles.workspaceInviteWelcome]}
                                     value={this.state.welcomeNote}
                                     onChangeText={text => this.setState({welcomeNote: text})}
+                                    onFocus={() => this.setState({pressOnEnter: false})}
+                                    onBlur={() => this.setState({pressOnEnter: true})}
                                 />
                             </View>
                             <FormAlertWithSubmitButton
@@ -310,6 +313,7 @@ class WorkspaceInvitePage extends React.Component {
                                 onFixTheErrorsLinkPressed={() => {}}
                                 message={this.props.policy.alertMessage}
                                 containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
+                                pressOnEnter={this.state.pressOnEnter}
                             />
                             <Pressable
                                 onPress={(e) => {

From 665acbab433a9dfef18ade64586eda9b90b6c99f Mon Sep 17 00:00:00 2001
From: AHMED <a.s1171111@gmail.com>
Date: Sat, 26 Feb 2022 10:56:53 +0200
Subject: [PATCH 2/7] fix from keyboard subcription

---
 src/components/Button.js                    | 31 ++++++---------------
 src/components/FormAlertWithSubmitButton.js |  6 +---
 src/libs/KeyboardShortcut/index.js          |  2 +-
 src/pages/workspace/WorkspaceInvitePage.js  |  4 ---
 4 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 11c9e860ebf..6c826576c69 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -116,17 +116,15 @@ class Button extends Component {
             return;
         }
 
-        this.subscribeEnterKey();
-    }
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
 
-    componentDidUpdate() {
-        // switch the keyboard listener on/off if pressOnEnter change.
-        if (!this.unsubscribe) {
-            this.subscribeEnterKey();
-        } else if (!this.props.pressOnEnter) {
-            this.unsubscribe();
-            this.unsubscribe = null;
-        }
+        // Setup and attach keypress handler for pressing the button with Enter key
+        this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
+            if (this.props.isDisabled || this.props.isLoading) {
+                return;
+            }
+            this.props.onPress();
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
     }
 
     componentWillUnmount() {
@@ -137,19 +135,6 @@ class Button extends Component {
         this.unsubscribe();
     }
 
-    /**
-     * Setup and attach keypress handler for pressing the button with Enter key
-     */
-    subscribeEnterKey() {
-        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
-        this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
-            if (this.props.isDisabled || this.props.isLoading) {
-                return;
-            }
-            this.props.onPress();
-        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, this.props.pressOnEnter);
-    }
-
     renderContent() {
         const ContentComponent = this.props.ContentComponent;
         if (ContentComponent) {
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 9adbd7745fa..9c90472b016 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -40,9 +40,6 @@ const propTypes = {
     /** Is the button in a loading state */
     isLoading: PropTypes.bool,
 
-    /** Call the onPress function when Enter key is pressed */
-    pressOnEnter: PropTypes.bool,
-
     ...withLocalizePropTypes,
 };
 
@@ -52,7 +49,6 @@ const defaultProps = {
     isMessageHtml: false,
     containerStyles: [],
     isLoading: false,
-    pressOnEnter: true,
 };
 
 const FormAlertWithSubmitButton = (props) => {
@@ -108,7 +104,7 @@ const FormAlertWithSubmitButton = (props) => {
             )}
             <Button
                 success
-                pressOnEnter={props.pressOnEnter}
+                pressOnEnter
                 text={props.buttonText}
                 onPress={props.onSubmit}
                 isDisabled={props.isDisabled}
diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
index 8bb508a3e49..92098b0cfb1 100644
--- a/src/libs/KeyboardShortcut/index.js
+++ b/src/libs/KeyboardShortcut/index.js
@@ -20,7 +20,7 @@ function getKeyboardShortcuts() {
  * @private
  */
 function bindHandlerToKeyupEvent(event) {
-    if (events[event.keyCode] === undefined) {
+    if (events[event.keyCode] === undefined || event.target.nodeName === 'TEXTAREA') {
         return;
     }
 
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 5dc886b914f..b63dceec52e 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -82,7 +82,6 @@ class WorkspaceInvitePage extends React.Component {
             selectedOptions: [],
             userToInvite,
             welcomeNote: this.getWelcomeNote(),
-            pressOnEnter: true,
         };
     }
 
@@ -301,8 +300,6 @@ class WorkspaceInvitePage extends React.Component {
                                     containerStyles={[styles.workspaceInviteWelcome]}
                                     value={this.state.welcomeNote}
                                     onChangeText={text => this.setState({welcomeNote: text})}
-                                    onFocus={() => this.setState({pressOnEnter: false})}
-                                    onBlur={() => this.setState({pressOnEnter: true})}
                                 />
                             </View>
                             <FormAlertWithSubmitButton
@@ -313,7 +310,6 @@ class WorkspaceInvitePage extends React.Component {
                                 onFixTheErrorsLinkPressed={() => {}}
                                 message={this.props.policy.alertMessage}
                                 containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
-                                pressOnEnter={this.state.pressOnEnter}
                             />
                             <Pressable
                                 onPress={(e) => {

From 4907af7b6a82c2283cf9388531a5c166d06fbf28 Mon Sep 17 00:00:00 2001
From: AHMED <a.s1171111@gmail.com>
Date: Fri, 11 Mar 2022 14:49:28 +0200
Subject: [PATCH 3/7] add shouldPreventDefault option

---
 src/components/Button.js           | 6 +++---
 src/libs/KeyboardShortcut/index.js | 8 ++++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index a57a68a1d50..dc39c098977 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -123,12 +123,12 @@ class Button extends Component {
         const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
 
         // Setup and attach keypress handler for pressing the button with Enter key
-        this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
-            if (this.props.isDisabled || this.props.isLoading) {
+        this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, (e) => {
+            if (this.props.isDisabled || this.props.isLoading || !e || e.target.nodeName === 'textarea') {
                 return;
             }
             this.props.onPress();
-        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, this.props.enterKeyEventListenerPriority);
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, false, this.props.enterKeyEventListenerPriority);
     }
 
     componentWillUnmount() {
diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
index aa485ffa8cd..e4e34fd7ae8 100644
--- a/src/libs/KeyboardShortcut/index.js
+++ b/src/libs/KeyboardShortcut/index.js
@@ -83,7 +83,9 @@ function bindHandlerToKeydownEvent(event) {
         if (_.isFunction(callback.callback)) {
             callback.callback(event);
         }
-        event.preventDefault();
+        if (callback.shouldPreventDefault) {
+            event.preventDefault();
+        }
 
         // If the event should not bubble, short-circuit the loop
         let shouldBubble = callback.shouldBubble || false;
@@ -134,11 +136,12 @@ function getPlatformEquivalentForKeys(keys) {
  * @param {String} descriptionKey Translation key for shortcut description
  * @param {String|Array<String>} [modifiers] Can either be shift or control
  * @param {Boolean} [captureOnInputs] Should we capture the event on inputs too?
+ * @param {boolean} [shouldPreventDefault] should we call event.preventDefault after callback ?
  * @param {Boolean|Function} [shouldBubble] Should the event bubble?
  * @param {Number} [priority] The position the callback should take in the stack. 0 means top priority, and 1 means less priority than the most recently added.
  * @returns {Function} clean up method
  */
-function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldBubble = false, priority = 0) {
+function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldPreventDefault = true, shouldBubble = false, priority = 0) {
     const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
     const displayName = getDisplayName(key, platformAdjustedModifiers);
     if (!_.has(eventHandlers, displayName)) {
@@ -150,6 +153,7 @@ function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOn
         id: callbackID,
         callback,
         captureOnInputs,
+        shouldPreventDefault,
         shouldBubble,
     });
 

From 8d7a4ed8e993569d515c28c4467f898f79176491 Mon Sep 17 00:00:00 2001
From: AHMED <a.s1171111@gmail.com>
Date: Fri, 11 Mar 2022 15:23:47 +0200
Subject: [PATCH 4/7] change param postion

---
 src/components/Button.js           | 2 +-
 src/libs/KeyboardShortcut/index.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index dc39c098977..86d0f4b084d 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -128,7 +128,7 @@ class Button extends Component {
                 return;
             }
             this.props.onPress();
-        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, false, this.props.enterKeyEventListenerPriority);
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true, false, this.props.enterKeyEventListenerPriority, false);
     }
 
     componentWillUnmount() {
diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
index e4e34fd7ae8..e7ace0b56b4 100644
--- a/src/libs/KeyboardShortcut/index.js
+++ b/src/libs/KeyboardShortcut/index.js
@@ -136,12 +136,12 @@ function getPlatformEquivalentForKeys(keys) {
  * @param {String} descriptionKey Translation key for shortcut description
  * @param {String|Array<String>} [modifiers] Can either be shift or control
  * @param {Boolean} [captureOnInputs] Should we capture the event on inputs too?
- * @param {boolean} [shouldPreventDefault] should we call event.preventDefault after callback ?
  * @param {Boolean|Function} [shouldBubble] Should the event bubble?
  * @param {Number} [priority] The position the callback should take in the stack. 0 means top priority, and 1 means less priority than the most recently added.
+ * @param {boolean} [shouldPreventDefault] should we call event.preventDefault after callback ?
  * @returns {Function} clean up method
  */
-function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldPreventDefault = true, shouldBubble = false, priority = 0) {
+function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldBubble = false, priority = 0, shouldPreventDefault = true) {
     const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
     const displayName = getDisplayName(key, platformAdjustedModifiers);
     if (!_.has(eventHandlers, displayName)) {

From aaaf19e138502c52c71bdc1de0d1088277d655be Mon Sep 17 00:00:00 2001
From: AHMED SHERIF <a.s1171111@gmail.com>
Date: Fri, 11 Mar 2022 15:50:41 +0200
Subject: [PATCH 5/7] Update src/libs/KeyboardShortcut/index.js

Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
---
 src/libs/KeyboardShortcut/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
index e7ace0b56b4..4b92775731f 100644
--- a/src/libs/KeyboardShortcut/index.js
+++ b/src/libs/KeyboardShortcut/index.js
@@ -138,7 +138,7 @@ function getPlatformEquivalentForKeys(keys) {
  * @param {Boolean} [captureOnInputs] Should we capture the event on inputs too?
  * @param {Boolean|Function} [shouldBubble] Should the event bubble?
  * @param {Number} [priority] The position the callback should take in the stack. 0 means top priority, and 1 means less priority than the most recently added.
- * @param {boolean} [shouldPreventDefault] should we call event.preventDefault after callback ?
+ * @param {Boolean} [shouldPreventDefault] Should call event.preventDefault after callback?
  * @returns {Function} clean up method
  */
 function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldBubble = false, priority = 0, shouldPreventDefault = true) {

From ec9f64e8682ebbb7cdad45d3fa2f8efc3bd7b0d0 Mon Sep 17 00:00:00 2001
From: AHMED SHERIF <a.s1171111@gmail.com>
Date: Fri, 11 Mar 2022 15:51:11 +0200
Subject: [PATCH 6/7] Update src/components/Button.js

Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
---
 src/components/Button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 86d0f4b084d..d12069956f4 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -124,7 +124,7 @@ class Button extends Component {
 
         // Setup and attach keypress handler for pressing the button with Enter key
         this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, (e) => {
-            if (this.props.isDisabled || this.props.isLoading || !e || e.target.nodeName === 'textarea') {
+            if (this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'textarea')) {
                 return;
             }
             this.props.onPress();

From b1d6afefebb3588128de9185635b681eb8d3839a Mon Sep 17 00:00:00 2001
From: AHMED SHERIF <a.s1171111@gmail.com>
Date: Fri, 11 Mar 2022 16:20:04 +0200
Subject: [PATCH 7/7] Update src/components/Button.js

Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
---
 src/components/Button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index d12069956f4..d192c43f773 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -124,7 +124,7 @@ class Button extends Component {
 
         // Setup and attach keypress handler for pressing the button with Enter key
         this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, (e) => {
-            if (this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'textarea')) {
+            if (this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'TEXTAREA')) {
                 return;
             }
             this.props.onPress();