From 9360d83bbb682773ae8c3e3f3d3b94062844a4f3 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Tue, 10 Jan 2023 11:07:43 -0700 Subject: [PATCH 01/10] add log line to help confirm if this code is ever run --- src/pages/home/report/ReportActionCompose.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index acd262d2e78d..f1aa429900f8 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -22,6 +22,7 @@ import AttachmentModal from '../../../components/AttachmentModal'; import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; import CONST from '../../../CONST'; +import Log from '../../../libs/Log'; import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus'; import Permissions from '../../../libs/Permissions'; import Navigation from '../../../libs/Navigation/Navigation'; @@ -158,6 +159,7 @@ class ReportActionCompose extends React.Component { componentDidMount() { ReportActionComposeFocusManager.onComposerFocus(() => { + Log.hmmm('ReportActionComposeFocusManager.onComposerFocus called'); if (!this.shouldFocusInputOnScreenFocus || !this.props.isFocused) { return; } From 4ea07c91b6178bda9ed925693c637d79d652d2fc Mon Sep 17 00:00:00 2001 From: David Bondy Date: Wed, 11 Jan 2023 17:13:49 -0700 Subject: [PATCH 02/10] hot fix a bug so that mWeb beahaves like Web in regard to giving focus back to the compose input component --- src/libs/canFocusInputOnScreenFocus/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/libs/canFocusInputOnScreenFocus/index.js b/src/libs/canFocusInputOnScreenFocus/index.js index c930c0d944ec..3c72b2d38a29 100644 --- a/src/libs/canFocusInputOnScreenFocus/index.js +++ b/src/libs/canFocusInputOnScreenFocus/index.js @@ -1,3 +1 @@ -import * as DeviceCapabilities from '../DeviceCapabilities'; - -export default () => !DeviceCapabilities.canUseTouchScreen(); +export default () => true; From 64b83e0257ce76997614a2a9569949f574eb8723 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Wed, 11 Jan 2023 17:14:15 -0700 Subject: [PATCH 03/10] remove unneeded log line, add comment --- src/pages/home/report/ReportActionCompose.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index f1aa429900f8..e64bedac8767 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -158,8 +158,9 @@ class ReportActionCompose extends React.Component { } componentDidMount() { + // This callback is used in the contextMenuActions to manage giving focus back to the compose input. + // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component ReportActionComposeFocusManager.onComposerFocus(() => { - Log.hmmm('ReportActionComposeFocusManager.onComposerFocus called'); if (!this.shouldFocusInputOnScreenFocus || !this.props.isFocused) { return; } From 4884bdc5fd3cc6889bb14286e6b137bc5c075504 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Thu, 12 Jan 2023 16:41:35 -0700 Subject: [PATCH 04/10] re-add this logic so we dont cause regression on sign in pages --- src/libs/canFocusInputOnScreenFocus/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/canFocusInputOnScreenFocus/index.js b/src/libs/canFocusInputOnScreenFocus/index.js index 3c72b2d38a29..c930c0d944ec 100644 --- a/src/libs/canFocusInputOnScreenFocus/index.js +++ b/src/libs/canFocusInputOnScreenFocus/index.js @@ -1 +1,3 @@ -export default () => true; +import * as DeviceCapabilities from '../DeviceCapabilities'; + +export default () => !DeviceCapabilities.canUseTouchScreen(); From 9f33b93954fa62029697e8e7bf7f4ed6412d1925 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Thu, 12 Jan 2023 16:42:28 -0700 Subject: [PATCH 05/10] set variable based on platform type so we know if we need to refocus on compose button when modals close --- src/pages/home/report/ReportActionCompose.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e64bedac8767..89fcbbad47a1 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -4,6 +4,7 @@ import { View, TouchableOpacity, InteractionManager, + Platform, } from 'react-native'; import _ from 'underscore'; import lodashGet from 'lodash/get'; @@ -135,12 +136,15 @@ class ReportActionCompose extends React.Component { this.getInputPlaceholder = this.getInputPlaceholder.bind(this); this.getIOUOptions = this.getIOUOptions.bind(this); this.addAttachment = this.addAttachment.bind(this); - this.comment = props.comment; - this.shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus(); + + // React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management + // code that will refocus the compose input after a user closes a modal or some other actions, see usage of ReportActionComposeFocusManager + this.isWeb = Platform.select({native: () => false, default: () => true}); + console.log('bondydaa '+this.isWeb); this.state = { - isFocused: this.shouldFocusInputOnScreenFocus && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible, + isFocused: this.isWeb && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible, isFullComposerAvailable: props.isComposerFullSize, textInputShouldClear: false, isCommentEmpty: props.comment.length === 0, @@ -161,7 +165,7 @@ class ReportActionCompose extends React.Component { // This callback is used in the contextMenuActions to manage giving focus back to the compose input. // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component ReportActionComposeFocusManager.onComposerFocus(() => { - if (!this.shouldFocusInputOnScreenFocus || !this.props.isFocused) { + if (!this.isWeb || !this.props.isFocused) { return; } @@ -180,7 +184,7 @@ class ReportActionCompose extends React.Component { // We want to focus or refocus the input when a modal has been closed and the underlying screen is focused. // We avoid doing this on native platforms since the software keyboard popping // open creates a jarring and broken UX. - if (this.shouldFocusInputOnScreenFocus && this.props.isFocused + if (this.isWeb && this.props.isFocused && prevProps.modal.isVisible && !this.props.modal.isVisible) { this.focus(); } @@ -662,7 +666,7 @@ class ReportActionCompose extends React.Component { disabled={this.props.disabled} > Date: Thu, 12 Jan 2023 16:42:47 -0700 Subject: [PATCH 06/10] remove unused import now --- src/pages/home/report/ReportActionCompose.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 89fcbbad47a1..a764ec71de52 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -24,7 +24,6 @@ import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; import CONST from '../../../CONST'; import Log from '../../../libs/Log'; -import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus'; import Permissions from '../../../libs/Permissions'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; From 80ce3c3fe3a6b6a05cc090adc8d6219750d19075 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Thu, 12 Jan 2023 16:43:27 -0700 Subject: [PATCH 07/10] remove unused import --- src/pages/home/report/ReportActionCompose.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index a764ec71de52..0b1100a32b2c 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -23,7 +23,6 @@ import AttachmentModal from '../../../components/AttachmentModal'; import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; import CONST from '../../../CONST'; -import Log from '../../../libs/Log'; import Permissions from '../../../libs/Permissions'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; From 57528b44caa518dca5dd819f0440f2dc9d146110 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Fri, 13 Jan 2023 14:47:41 -0700 Subject: [PATCH 08/10] use separate native files to determine booleans, fix naming convenction for variable in composer component --- src/libs/shouldOverrideRnFocusBehavior/index.js | 1 + .../shouldOverrideRnFocusBehavior/index.native.js | 1 + src/pages/home/report/ReportActionCompose.js | 12 ++++++------ 3 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 src/libs/shouldOverrideRnFocusBehavior/index.js create mode 100644 src/libs/shouldOverrideRnFocusBehavior/index.native.js diff --git a/src/libs/shouldOverrideRnFocusBehavior/index.js b/src/libs/shouldOverrideRnFocusBehavior/index.js new file mode 100644 index 000000000000..3c72b2d38a29 --- /dev/null +++ b/src/libs/shouldOverrideRnFocusBehavior/index.js @@ -0,0 +1 @@ +export default () => true; diff --git a/src/libs/shouldOverrideRnFocusBehavior/index.native.js b/src/libs/shouldOverrideRnFocusBehavior/index.native.js new file mode 100644 index 000000000000..eae5767cffbc --- /dev/null +++ b/src/libs/shouldOverrideRnFocusBehavior/index.native.js @@ -0,0 +1 @@ +export default () => false; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 0b1100a32b2c..440492e572b5 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -22,6 +22,7 @@ import ReportTypingIndicator from './ReportTypingIndicator'; import AttachmentModal from '../../../components/AttachmentModal'; import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; +import shouldOverrideRnFocusBehavior from '../../../libs/shouldOverrideRnFocusBehavior'; import CONST from '../../../CONST'; import Permissions from '../../../libs/Permissions'; import Navigation from '../../../libs/Navigation/Navigation'; @@ -138,11 +139,10 @@ class ReportActionCompose extends React.Component { // React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management // code that will refocus the compose input after a user closes a modal or some other actions, see usage of ReportActionComposeFocusManager - this.isWeb = Platform.select({native: () => false, default: () => true}); - console.log('bondydaa '+this.isWeb); + this.shouldOverrideRnFocusBehavior = shouldOverrideRnFocusBehavior(); this.state = { - isFocused: this.isWeb && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible, + isFocused: this.shouldOverrideRnFocusBehavior && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible, isFullComposerAvailable: props.isComposerFullSize, textInputShouldClear: false, isCommentEmpty: props.comment.length === 0, @@ -163,7 +163,7 @@ class ReportActionCompose extends React.Component { // This callback is used in the contextMenuActions to manage giving focus back to the compose input. // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component ReportActionComposeFocusManager.onComposerFocus(() => { - if (!this.isWeb || !this.props.isFocused) { + if (!this.shouldOverrideRnFocusBehavior || !this.props.isFocused) { return; } @@ -182,7 +182,7 @@ class ReportActionCompose extends React.Component { // We want to focus or refocus the input when a modal has been closed and the underlying screen is focused. // We avoid doing this on native platforms since the software keyboard popping // open creates a jarring and broken UX. - if (this.isWeb && this.props.isFocused + if (this.shouldOverrideRnFocusBehavior && this.props.isFocused && prevProps.modal.isVisible && !this.props.modal.isVisible) { this.focus(); } @@ -664,7 +664,7 @@ class ReportActionCompose extends React.Component { disabled={this.props.disabled} > Date: Fri, 13 Jan 2023 14:55:37 -0700 Subject: [PATCH 09/10] remove unused import --- src/pages/home/report/ReportActionCompose.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 440492e572b5..5fba3bf229c5 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -4,7 +4,6 @@ import { View, TouchableOpacity, InteractionManager, - Platform, } from 'react-native'; import _ from 'underscore'; import lodashGet from 'lodash/get'; From 89722bf06344b2fd264af6a20ec0d0529c70b055 Mon Sep 17 00:00:00 2001 From: David Bondy Date: Thu, 19 Jan 2023 10:25:24 -0700 Subject: [PATCH 10/10] rename variable and files, thanks chatgpt --- .../index.js | 0 .../index.native.js | 0 src/pages/home/report/ReportActionCompose.js | 12 ++++++------ 3 files changed, 6 insertions(+), 6 deletions(-) rename src/libs/{shouldOverrideRnFocusBehavior => willBlurTextInputOnTapOutside}/index.js (100%) rename src/libs/{shouldOverrideRnFocusBehavior => willBlurTextInputOnTapOutside}/index.native.js (100%) diff --git a/src/libs/shouldOverrideRnFocusBehavior/index.js b/src/libs/willBlurTextInputOnTapOutside/index.js similarity index 100% rename from src/libs/shouldOverrideRnFocusBehavior/index.js rename to src/libs/willBlurTextInputOnTapOutside/index.js diff --git a/src/libs/shouldOverrideRnFocusBehavior/index.native.js b/src/libs/willBlurTextInputOnTapOutside/index.native.js similarity index 100% rename from src/libs/shouldOverrideRnFocusBehavior/index.native.js rename to src/libs/willBlurTextInputOnTapOutside/index.native.js diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index dc2e7394931d..3d15897f9222 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -21,7 +21,7 @@ import ReportTypingIndicator from './ReportTypingIndicator'; import AttachmentModal from '../../../components/AttachmentModal'; import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; -import shouldOverrideRnFocusBehavior from '../../../libs/shouldOverrideRnFocusBehavior'; +import willBlurTextInputOnTapOutside from '../../../libs/willBlurTextInputOnTapOutside'; import CONST from '../../../CONST'; import Permissions from '../../../libs/Permissions'; import Navigation from '../../../libs/Navigation/Navigation'; @@ -138,10 +138,10 @@ class ReportActionCompose extends React.Component { // React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management // code that will refocus the compose input after a user closes a modal or some other actions, see usage of ReportActionComposeFocusManager - this.shouldOverrideRnFocusBehavior = shouldOverrideRnFocusBehavior(); + this.willBlurTextInputOnTapOutside = willBlurTextInputOnTapOutside(); this.state = { - isFocused: this.shouldOverrideRnFocusBehavior && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible, + isFocused: this.willBlurTextInputOnTapOutside && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible, isFullComposerAvailable: props.isComposerFullSize, textInputShouldClear: false, isCommentEmpty: props.comment.length === 0, @@ -162,7 +162,7 @@ class ReportActionCompose extends React.Component { // This callback is used in the contextMenuActions to manage giving focus back to the compose input. // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component ReportActionComposeFocusManager.onComposerFocus(() => { - if (!this.shouldOverrideRnFocusBehavior || !this.props.isFocused) { + if (!this.willBlurTextInputOnTapOutside || !this.props.isFocused) { return; } @@ -181,7 +181,7 @@ class ReportActionCompose extends React.Component { // We want to focus or refocus the input when a modal has been closed and the underlying screen is focused. // We avoid doing this on native platforms since the software keyboard popping // open creates a jarring and broken UX. - if (this.shouldOverrideRnFocusBehavior && this.props.isFocused + if (this.willBlurTextInputOnTapOutside && this.props.isFocused && prevProps.modal.isVisible && !this.props.modal.isVisible) { this.focus(); } @@ -665,7 +665,7 @@ class ReportActionCompose extends React.Component { disabled={this.props.disabled} >