From f05e29ed4b02079507c79db43bde45356f773f76 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola 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 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 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 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 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() {