Merge pull request #21656 from akinwale/task-20690

fix: refocus the input field on the login screen after returning to the tab

Author: youssef-lr

src/components/TextInput/index.js

@@ -4,6 +4,8 @@ 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 {
     componentDidMount() {
@@ -14,6 +16,22 @@ class TextInput extends React.Component {
         if (this.props.name) {
             this.textInput.setAttribute('name', this.props.name);
         }
+
+        // Forcefully activate the soft keyboard when the user switches between tabs while input was focused.
+        this.removeVisibilityListener = Visibility.onVisibilityChange(() => {
+            if (!Visibility.isVisible() || !this.textInput || DomUtils.getActiveElement() !== this.textInput) {
+                return;
+            }
+            this.textInput.blur();
+            this.textInput.focus();
+        });
+    }
+
+    componentWillUnmount() {
+        if (!this.removeVisibilityListener) {
+            return;
+        }
+        this.removeVisibilityListener();
     }
 
     render() {

src/libs/DomUtils/index.js

@@ -2,6 +2,11 @@ function blurActiveElement() {
     document.activeElement.blur();
 }
 
+function getActiveElement() {
+    return document.activeElement;
+}
+
 export default {
     blurActiveElement,
+    getActiveElement,
 };

src/libs/DomUtils/index.native.js

@@ -1,5 +1,10 @@
 function blurActiveElement() {}
 
+function getActiveElement() {
+    return undefined;
+}
+
 export default {
     blurActiveElement,
+    getActiveElement,
 };