From f05e29ed4b02079507c79db43bde45356f773f76 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Sat, 15 Jul 2023 08:19:03 +0100
Subject: [PATCH 1/5] handle showing the soft keyboard upon refocus in the
 TextInput component

---
 src/components/TextInput/index.js | 22 ++++++++++++++++++++++
 src/libs/DomUtils/index.js        |  5 +++++
 src/libs/DomUtils/index.native.js |  5 +++++
 3 files changed, 32 insertions(+)

diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index ed8bdd0a622d..a2693f727cd5 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -4,8 +4,15 @@ import styles from '../../styles/styles';
 import * as styleConst from './styleConst';
 import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
+import DomUtils from '../../libs/DomUtils';
+import Visibility from '../../libs/Visibility';
 
 class TextInput extends React.Component {
+    constructor(props) {
+        super(props);
+        this.unsubscribeVisibilityListener = null;
+    }
+
     componentDidMount() {
         if (this.props.disableKeyboard) {
             this.textInput.setAttribute('inputmode', 'none');
@@ -14,6 +21,21 @@ class TextInput extends React.Component {
         if (this.props.name) {
             this.textInput.setAttribute('name', this.props.name);
         }
+
+        this.unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => {
+            if (!Visibility.isVisible() || !this.textInput || DomUtils.getActiveElement() !== this.textInput) {
+                return;
+            }
+            this.textInput.blur();
+            this.textInput.focus();
+        });
+    }
+
+    componentWillUnmount() {
+        if (!this.unsubscribeVisibilityListener) {
+            return;
+        }
+        this.unsubscribeVisibilityListener();
     }
 
     render() {
diff --git a/src/libs/DomUtils/index.js b/src/libs/DomUtils/index.js
index 4e58ea3a08fb..ad636c6167fb 100644
--- a/src/libs/DomUtils/index.js
+++ b/src/libs/DomUtils/index.js
@@ -2,6 +2,11 @@ function blurActiveElement() {
     document.activeElement.blur();
 }
 
+function getActiveElement() {
+    return document.activeElement;
+}
+
 export default {
     blurActiveElement,
+    getActiveElement,
 };
diff --git a/src/libs/DomUtils/index.native.js b/src/libs/DomUtils/index.native.js
index 0e796bc40b54..1d3ef14c954d 100644
--- a/src/libs/DomUtils/index.native.js
+++ b/src/libs/DomUtils/index.native.js
@@ -1,5 +1,10 @@
 function blurActiveElement() {}
 
+function getActiveElement() {
+    return undefined;
+}
+
 export default {
     blurActiveElement,
+    getActiveElement,
 };

From 1de6b041491f8ecc38ea90769ee0514a633876de Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 20 Jul 2023 14:19:44 +0100
Subject: [PATCH 2/5] remove unnecessary constructor

---
 src/components/TextInput/index.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index a2693f727cd5..e2c261fa3c5e 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -8,11 +8,6 @@ import DomUtils from '../../libs/DomUtils';
 import Visibility from '../../libs/Visibility';
 
 class TextInput extends React.Component {
-    constructor(props) {
-        super(props);
-        this.unsubscribeVisibilityListener = null;
-    }
-
     componentDidMount() {
         if (this.props.disableKeyboard) {
             this.textInput.setAttribute('inputmode', 'none');

From 232bf8dbf72b2a6e75babcb4869c62779682f4ae Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 20 Jul 2023 15:31:22 +0100
Subject: [PATCH 3/5] add comments for explanation

---
 src/components/TextInput/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index e2c261fa3c5e..c224a2659260 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -17,6 +17,11 @@ class TextInput extends React.Component {
             this.textInput.setAttribute('name', this.props.name);
         }
 
+        /**
+         * A visibliity listener responsible for re-establishing focus on the TextInput in cases where a user
+         * switches away from an MWeb tab and back. This forces the soft keyboard to be activated on Android
+         * after switching back to the tab. See https://github.com/Expensify/App/issues/20690 for more details.
+         */
         this.unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => {
             if (!Visibility.isVisible() || !this.textInput || DomUtils.getActiveElement() !== this.textInput) {
                 return;

From 6de85ece541ceda520f6b5112d5016e0a75d1dae Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Thu, 20 Jul 2023 15:46:52 +0100
Subject: [PATCH 4/5] modify comment

---
 src/components/TextInput/index.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index c224a2659260..76006221386f 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -17,11 +17,7 @@ class TextInput extends React.Component {
             this.textInput.setAttribute('name', this.props.name);
         }
 
-        /**
-         * A visibliity listener responsible for re-establishing focus on the TextInput in cases where a user
-         * switches away from an MWeb tab and back. This forces the soft keyboard to be activated on Android
-         * after switching back to the tab. See https://github.com/Expensify/App/issues/20690 for more details.
-         */
+        // Forcefully activate the soft keyboard when the user switches between tabs while input was focused.
         this.unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => {
             if (!Visibility.isVisible() || !this.textInput || DomUtils.getActiveElement() !== this.textInput) {
                 return;

From 6d083259f203cb969be72d4b45b1394110b75f48 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 25 Jul 2023 11:32:32 +0100
Subject: [PATCH 5/5] rename listener

---
 src/components/TextInput/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 76006221386f..672167819194 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -18,7 +18,7 @@ class TextInput extends React.Component {
         }
 
         // Forcefully activate the soft keyboard when the user switches between tabs while input was focused.
-        this.unsubscribeVisibilityListener = Visibility.onVisibilityChange(() => {
+        this.removeVisibilityListener = Visibility.onVisibilityChange(() => {
             if (!Visibility.isVisible() || !this.textInput || DomUtils.getActiveElement() !== this.textInput) {
                 return;
             }
@@ -28,10 +28,10 @@ class TextInput extends React.Component {
     }
 
     componentWillUnmount() {
-        if (!this.unsubscribeVisibilityListener) {
+        if (!this.removeVisibilityListener) {
             return;
         }
-        this.unsubscribeVisibilityListener();
+        this.removeVisibilityListener();
     }
 
     render() {
