From e9e43b25d467d0cc976476395208e05f5590f0fd Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 15 Dec 2022 10:18:07 -0700 Subject: [PATCH 1/6] Remove isOpen() --- src/components/HeaderWithCloseButton.js | 13 +++++++------ src/libs/VirtualKeyboard/index.js | 16 +--------------- src/libs/VirtualKeyboard/index.native.js | 14 +------------- 3 files changed, 9 insertions(+), 34 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 27ab5dbbe890..f1c5e1e68699 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -9,14 +9,14 @@ import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; import Tooltip from './Tooltip'; -import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu'; -import VirtualKeyboard from '../libs/VirtualKeyboard'; import getButtonState from '../libs/getButtonState'; import * as StyleUtils from '../styles/StyleUtils'; -import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState'; import compose from '../libs/compose'; +import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu'; +import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState'; +import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import withKeyboardState, {withKeyboardStatePropTypes} from './withKeyboardState'; const propTypes = { /** Title of the Header */ @@ -79,8 +79,8 @@ const propTypes = { }), ...withLocalizePropTypes, - ...withDelayToggleButtonStatePropTypes, + ...withKeyboardStatePropTypes, }; const defaultProps = { @@ -142,7 +142,7 @@ class HeaderWithCloseButton extends Component { { - if (VirtualKeyboard.isOpen()) { + if (this.props.isShown) { Keyboard.dismiss(); } this.props.onBackButtonPress(); @@ -224,4 +224,5 @@ HeaderWithCloseButton.defaultProps = defaultProps; export default compose( withLocalize, withDelayToggleButtonState, + withKeyboardState, )(HeaderWithCloseButton); diff --git a/src/libs/VirtualKeyboard/index.js b/src/libs/VirtualKeyboard/index.js index 9b86a124efdc..cb12670b8c5d 100644 --- a/src/libs/VirtualKeyboard/index.js +++ b/src/libs/VirtualKeyboard/index.js @@ -1,18 +1,6 @@ import _ from 'underscore'; import * as Browser from '../Browser'; -/** - * Is the virtual keyboard open? - * - * @returns {Boolean|null} – null if the VirtualKeyboard API is unavailable - */ -function isOpen() { - if (!_.has(navigator, 'virtualKeyboard')) { - return null; - } - return navigator.virtualKeyboard.boundingRect.y > 0; -} - /** * As of January 2022, the VirtualKeyboard web API is not available in all browsers yet * If it is unavailable, we default to assuming that the virtual keyboard is open on mobile devices. @@ -21,11 +9,9 @@ function isOpen() { * @returns {Boolean} */ function shouldAssumeIsOpen() { - const isOpened = isOpen(); - return _.isNull(isOpened) ? Browser.isMobile() : isOpened; + return Browser.isMobile(); } export default { - isOpen, shouldAssumeIsOpen, }; diff --git a/src/libs/VirtualKeyboard/index.native.js b/src/libs/VirtualKeyboard/index.native.js index dc3905f3d599..fdc345e01319 100644 --- a/src/libs/VirtualKeyboard/index.native.js +++ b/src/libs/VirtualKeyboard/index.native.js @@ -16,18 +16,6 @@ Keyboard.addListener( }, ); -/** - * Is the virtual keyboard open? - * - * Note – the web equivalent of this function may return null. - * - * @returns {Boolean} - */ -function isOpen() { - return isVirtualKeyboardOpen; -} - export default { - isOpen, - shouldAssumeIsOpen: isOpen, + shouldAssumeIsOpen: () => isVirtualKeyboardOpen, }; From a108ab0400539af3ad293c698c5718c9e76c8ff6 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 15 Dec 2022 10:26:00 -0700 Subject: [PATCH 2/6] Remove VirtualKeyboard --- src/libs/VirtualKeyboard/index.js | 17 -------------- src/libs/VirtualKeyboard/index.native.js | 21 ------------------ src/pages/home/report/ReportActionCompose.js | 13 ++++++----- .../report/ReportActionItemMessageEdit.js | 22 +++++++++---------- 4 files changed, 19 insertions(+), 54 deletions(-) delete mode 100644 src/libs/VirtualKeyboard/index.js delete mode 100644 src/libs/VirtualKeyboard/index.native.js diff --git a/src/libs/VirtualKeyboard/index.js b/src/libs/VirtualKeyboard/index.js deleted file mode 100644 index cb12670b8c5d..000000000000 --- a/src/libs/VirtualKeyboard/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import _ from 'underscore'; -import * as Browser from '../Browser'; - -/** - * As of January 2022, the VirtualKeyboard web API is not available in all browsers yet - * If it is unavailable, we default to assuming that the virtual keyboard is open on mobile devices. - * See https://github.com/Expensify/App/issues/6767 for additional context. - * - * @returns {Boolean} - */ -function shouldAssumeIsOpen() { - return Browser.isMobile(); -} - -export default { - shouldAssumeIsOpen, -}; diff --git a/src/libs/VirtualKeyboard/index.native.js b/src/libs/VirtualKeyboard/index.native.js deleted file mode 100644 index fdc345e01319..000000000000 --- a/src/libs/VirtualKeyboard/index.native.js +++ /dev/null @@ -1,21 +0,0 @@ -import {Keyboard} from 'react-native'; - -let isVirtualKeyboardOpen = false; - -Keyboard.addListener( - 'keyboardDidShow', - () => { - isVirtualKeyboardOpen = true; - }, -); - -Keyboard.addListener( - 'keyboardDidHide', - () => { - isVirtualKeyboardOpen = false; - }, -); - -export default { - shouldAssumeIsOpen: () => isVirtualKeyboardOpen, -}; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 7811d1c25ee1..20b417551749 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -21,11 +21,8 @@ import ReportTypingIndicator from './ReportTypingIndicator'; import AttachmentModal from '../../../components/AttachmentModal'; import compose from '../../../libs/compose'; import PopoverMenu from '../../../components/PopoverMenu'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import withDrawerState from '../../../components/withDrawerState'; import CONST from '../../../CONST'; import canFocusInputOnScreenFocus from '../../../libs/canFocusInputOnScreenFocus'; -import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import Permissions from '../../../libs/Permissions'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; @@ -39,7 +36,6 @@ import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider import * as User from '../../../libs/actions/User'; import Tooltip from '../../../components/Tooltip'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; -import VirtualKeyboard from '../../../libs/VirtualKeyboard'; import canUseTouchScreen from '../../../libs/canUseTouchscreen'; import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView'; import OfflineIndicator from '../../../components/OfflineIndicator'; @@ -49,6 +45,10 @@ import * as EmojiUtils from '../../../libs/EmojiUtils'; import reportPropTypes from '../../reportPropTypes'; import ReportDropUI from './ReportDropUI'; import DragAndDrop from '../../../components/DragAndDrop'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import withDrawerState from '../../../components/withDrawerState'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import withKeyboardState, {withKeyboardStatePropTypes} from '../../../components/withKeyboardState'; const propTypes = { /** Beta features list */ @@ -99,6 +99,7 @@ const propTypes = { ...windowDimensionsPropTypes, ...withLocalizePropTypes, ...withCurrentUserPersonalDetailsPropTypes, + ...withKeyboardStatePropTypes, }; const defaultProps = { @@ -430,7 +431,8 @@ class ReportActionCompose extends React.Component { * @param {Object} e */ triggerHotkeyActions(e) { - if (!e || VirtualKeyboard.shouldAssumeIsOpen()) { + // Do not trigger actions for mobileWeb or native clients that have the keyboard open + if (!e || (this.props.isSmallScreenWidth || this.props.isShown)) { return; } @@ -741,6 +743,7 @@ export default compose( withNetwork(), withPersonalDetails(), withCurrentUserPersonalDetails, + withKeyboardState, withOnyx({ betas: { key: ONYXKEYS.BETAS, diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 2f7fbc29db33..3d714445e2e2 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -10,18 +10,18 @@ import Composer from '../../../components/Composer'; import * as Report from '../../../libs/actions/Report'; import * as ReportScrollManager from '../../../libs/ReportScrollManager'; import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; -import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import Button from '../../../components/Button'; import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; import compose from '../../../libs/compose'; import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton'; import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu'; -import VirtualKeyboard from '../../../libs/VirtualKeyboard'; import * as EmojiUtils from '../../../libs/EmojiUtils'; import reportPropTypes from '../../reportPropTypes'; import ExceededCommentLength from '../../../components/ExceededCommentLength'; import CONST from '../../../CONST'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import withKeyboardState, {withKeyboardStatePropTypes} from '../../../components/withKeyboardState'; const propTypes = { /** All the data of the action */ @@ -43,14 +43,12 @@ const propTypes = { // eslint-disable-next-line react/no-unused-prop-types report: reportPropTypes, - // Whether or not the emoji picker is disabled + /** Whether or not the emoji picker is disabled */ shouldDisableEmojiPicker: PropTypes.bool, - /** Window Dimensions Props */ - ...windowDimensionsPropTypes, - - /** Localization props */ ...withLocalizePropTypes, + ...windowDimensionsPropTypes, + ...withKeyboardStatePropTypes, }; const defaultProps = { @@ -195,7 +193,8 @@ class ReportActionItemMessageEdit extends React.Component { * @param {Event} e */ triggerSaveOrCancel(e) { - if (!e || VirtualKeyboard.shouldAssumeIsOpen()) { + // Do not trigger save/cancel for mobileWeb or native clients that have the keyboard open + if (!e || (this.props.isSmallScreenWidth || this.props.isShown)) { return; } if (e.key === 'Enter' && !e.shiftKey) { @@ -233,7 +232,7 @@ class ReportActionItemMessageEdit extends React.Component { onFocus={() => { this.setState({isFocused: true}); ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true); - toggleReportActionComposeView(false, VirtualKeyboard.shouldAssumeIsOpen()); + toggleReportActionComposeView(false, this.props.isSmallScreenWidth); }} onBlur={(event) => { // Return to prevent re-render when save/cancel button is pressed which cancels the onPress event by re-rendering @@ -241,7 +240,7 @@ class ReportActionItemMessageEdit extends React.Component { return; } this.setState({isFocused: false}); - toggleReportActionComposeView(true, VirtualKeyboard.shouldAssumeIsOpen()); + toggleReportActionComposeView(true, this.props.isSmallScreenWidth); }} selection={this.state.selection} onSelectionChange={this.onSelectionChange} @@ -285,6 +284,7 @@ ReportActionItemMessageEdit.defaultProps = defaultProps; export default compose( withLocalize, withWindowDimensions, + withKeyboardState, )(React.forwardRef((props, ref) => ( /* eslint-disable-next-line react/jsx-props-no-spreading */ From 11f1f5534dc1c4d74ba7e43544e32742d44e0b00 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 15 Dec 2022 11:19:54 -0700 Subject: [PATCH 3/6] Refactor to properly forward refs --- src/App.js | 2 + src/components/HeaderWithCloseButton.js | 4 +- src/components/withKeyboardState.js | 111 ++++++++++-------- src/pages/home/report/ReportActionCompose.js | 4 +- .../report/ReportActionItemMessageEdit.js | 4 +- 5 files changed, 71 insertions(+), 54 deletions(-) diff --git a/src/App.js b/src/App.js index 8b794f5e20d8..581012838973 100644 --- a/src/App.js +++ b/src/App.js @@ -15,6 +15,7 @@ import ComposeProviders from './components/ComposeProviders'; import SafeArea from './components/SafeArea'; import * as Environment from './libs/Environment/Environment'; import {WindowDimensionsProvider} from './components/withWindowDimensions'; +import {KeyboardStateProvider} from './components/withKeyboardState'; // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx if (window && Environment.isDevelopment()) { @@ -41,6 +42,7 @@ const App = () => ( LocaleContextProvider, HTMLEngineProvider, WindowDimensionsProvider, + KeyboardStateProvider, ]} > diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index f1c5e1e68699..dd9d81230cf6 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -16,7 +16,7 @@ import compose from '../libs/compose'; import ThreeDotsMenu, {ThreeDotsMenuItemPropTypes} from './ThreeDotsMenu'; import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import withKeyboardState, {withKeyboardStatePropTypes} from './withKeyboardState'; +import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState'; const propTypes = { /** Title of the Header */ @@ -80,7 +80,7 @@ const propTypes = { ...withLocalizePropTypes, ...withDelayToggleButtonStatePropTypes, - ...withKeyboardStatePropTypes, + ...keyboardStatePropTypes, }; const defaultProps = { diff --git a/src/components/withKeyboardState.js b/src/components/withKeyboardState.js index b1159bdb376d..caf3dcfe0b31 100755 --- a/src/components/withKeyboardState.js +++ b/src/components/withKeyboardState.js @@ -1,64 +1,79 @@ -import React, {Component} from 'react'; +/* eslint-disable react/no-unused-state */ +import React, {forwardRef, createContext} from 'react'; import PropTypes from 'prop-types'; import {Keyboard} from 'react-native'; import getComponentDisplayName from '../libs/getComponentDisplayName'; -const withKeyboardStatePropTypes = { - /** Returns whether keyboard is open */ +const KeyboardStateContext = createContext(null); +const keyboardStatePropTypes = { + /** Whether or not the keyboard is open */ isShown: PropTypes.bool.isRequired, }; -export default function withKeyboardState(WrappedComponent) { - const WithKeyboardState = class extends Component { - constructor(props) { - super(props); - this.state = { - isShown: false, - }; - } +const keyboardStateProviderPropTypes = { + /* Actual content wrapped by this component */ + children: PropTypes.node.isRequired, +}; + +class KeyboardStateProvider extends React.Component { + constructor(props) { + super(props); + + this.state = { + isShown: false, + }; + } - componentDidMount() { - this.keyboardDidShowListener = Keyboard.addListener( - 'keyboardDidShow', - () => { - this.setState({isShown: true}); - }, - ); - this.keyboardDidHideListener = Keyboard.addListener( - 'keyboardDidHide', - () => { - this.setState({isShown: false}); - }, - ); - } + componentDidMount() { + this.keyboardDidShowListener = Keyboard.addListener( + 'keyboardDidShow', + () => { + this.setState({isShown: true}); + }, + ); + this.keyboardDidHideListener = Keyboard.addListener( + 'keyboardDidHide', + () => { + this.setState({isShown: false}); + }, + ); + } - componentWillUnmount() { - this.keyboardDidShowListener.remove(); - this.keyboardDidHideListener.remove(); - } + componentWillUnmount() { + this.keyboardDidShowListener.remove(); + this.keyboardDidHideListener.remove(); + } - render() { - // eslint-disable-next-line react/jsx-props-no-spreading - return ; - } - }; + render() { + return ( + + {this.props.children} + + ); + } +} + +KeyboardStateProvider.propTypes = keyboardStateProviderPropTypes; - WithKeyboardState.displayName = `WithKeyboardState(${getComponentDisplayName(WrappedComponent)})`; - WithKeyboardState.propTypes = { - forwardedRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), - ]), - }; - WithKeyboardState.defaultProps = { - forwardedRef: undefined, - }; - return React.forwardRef((props, ref) => ( - // eslint-disable-next-line react/jsx-props-no-spreading - +/** + * @param {React.Component} WrappedComponent + * @returns {React.Component} + */ +export default function withKeyboardState(WrappedComponent) { + const WithKeyboardState = forwardRef((props, ref) => ( + + {keyboardStateProps => ( + // eslint-disable-next-line react/jsx-props-no-spreading + + )} + )); + + WithKeyboardState.displayName = `withKeyboardState(${getComponentDisplayName(WrappedComponent)})`; + return WithKeyboardState; } export { - withKeyboardStatePropTypes, + KeyboardStateProvider, + keyboardStatePropTypes, }; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 20b417551749..c5a3c970ee0a 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -48,7 +48,7 @@ import DragAndDrop from '../../../components/DragAndDrop'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import withDrawerState from '../../../components/withDrawerState'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import withKeyboardState, {withKeyboardStatePropTypes} from '../../../components/withKeyboardState'; +import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState'; const propTypes = { /** Beta features list */ @@ -99,7 +99,7 @@ const propTypes = { ...windowDimensionsPropTypes, ...withLocalizePropTypes, ...withCurrentUserPersonalDetailsPropTypes, - ...withKeyboardStatePropTypes, + ...keyboardStatePropTypes, }; const defaultProps = { diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 3d714445e2e2..b070cb934d54 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -21,7 +21,7 @@ import ExceededCommentLength from '../../../components/ExceededCommentLength'; import CONST from '../../../CONST'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import withKeyboardState, {withKeyboardStatePropTypes} from '../../../components/withKeyboardState'; +import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState'; const propTypes = { /** All the data of the action */ @@ -48,7 +48,7 @@ const propTypes = { ...withLocalizePropTypes, ...windowDimensionsPropTypes, - ...withKeyboardStatePropTypes, + ...keyboardStatePropTypes, }; const defaultProps = { From 5f471d5abcfd3379a63fb7ad0ac834e30bcbcd3d Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Thu, 15 Dec 2022 11:30:14 -0700 Subject: [PATCH 4/6] Remove extra parens --- src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index c5a3c970ee0a..684c75908a5a 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -432,7 +432,7 @@ class ReportActionCompose extends React.Component { */ triggerHotkeyActions(e) { // Do not trigger actions for mobileWeb or native clients that have the keyboard open - if (!e || (this.props.isSmallScreenWidth || this.props.isShown)) { + if (!e || this.props.isSmallScreenWidth || this.props.isShown) { return; } diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index b070cb934d54..514ba007a1c3 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -194,7 +194,7 @@ class ReportActionItemMessageEdit extends React.Component { */ triggerSaveOrCancel(e) { // Do not trigger save/cancel for mobileWeb or native clients that have the keyboard open - if (!e || (this.props.isSmallScreenWidth || this.props.isShown)) { + if (!e || this.props.isSmallScreenWidth || this.props.isShown) { return; } if (e.key === 'Enter' && !e.shiftKey) { From 7f7f359244349d42957c62e92b821cdc9fa7cf12 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Fri, 16 Dec 2022 09:50:39 -0700 Subject: [PATCH 5/6] Add more context to code comments --- src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 684c75908a5a..e5ef02a81008 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -431,7 +431,7 @@ class ReportActionCompose extends React.Component { * @param {Object} e */ triggerHotkeyActions(e) { - // Do not trigger actions for mobileWeb or native clients that have the keyboard open + // Do not trigger actions for mobileWeb or native clients that have the keyboard open because for those devices, we want the return key to insert newlines rather than submit the form if (!e || this.props.isSmallScreenWidth || this.props.isShown) { return; } diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index c924b8cce01a..7c104289d118 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -201,7 +201,7 @@ class ReportActionItemMessageEdit extends React.Component { * @param {Event} e */ triggerSaveOrCancel(e) { - // Do not trigger save/cancel for mobileWeb or native clients that have the keyboard open + // Do not trigger actions for mobileWeb or native clients that have the keyboard open because for those devices, we want the return key to insert newlines rather than submit the form if (!e || this.props.isSmallScreenWidth || this.props.isShown) { return; } From 6c81c5572908ba74e8072079b09a6f4c487ed329 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Fri, 16 Dec 2022 09:57:23 -0700 Subject: [PATCH 6/6] Rename prop so that it has more context --- src/components/HeaderWithCloseButton.js | 2 +- src/components/PDFView/index.native.js | 2 +- src/components/PDFView/pdfViewPropTypes.js | 2 ++ src/components/withKeyboardState.js | 8 ++++---- src/pages/home/report/ReportActionCompose.js | 2 +- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- src/pages/signin/SignInPageLayout/SignInPageContent.js | 6 +++--- 7 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index dd9d81230cf6..ee1970bca37d 100755 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -142,7 +142,7 @@ class HeaderWithCloseButton extends Component { { - if (this.props.isShown) { + if (this.props.isKeyboardShown) { Keyboard.dismiss(); } this.props.onBackButtonPress(); diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 46474eb73705..1029750b9ca5 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -45,7 +45,7 @@ class PDFView extends Component { } componentDidUpdate() { - this.props.onToggleKeyboard(this.props.isShown); + this.props.onToggleKeyboard(this.props.isKeyboardShown); } handleFailureToLoadPDF(error) { diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js index 281c135fe438..5f2c7e381dd0 100644 --- a/src/components/PDFView/pdfViewPropTypes.js +++ b/src/components/PDFView/pdfViewPropTypes.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import stylePropTypes from '../../styles/stylePropTypes'; import {windowDimensionsPropTypes} from '../withWindowDimensions'; +import {keyboardStatePropTypes} from '../withKeyboardState'; const propTypes = { /** URL to full-sized image */ @@ -13,6 +14,7 @@ const propTypes = { onToggleKeyboard: PropTypes.func, ...windowDimensionsPropTypes, + ...keyboardStatePropTypes, }; const defaultProps = { diff --git a/src/components/withKeyboardState.js b/src/components/withKeyboardState.js index caf3dcfe0b31..345ff5bb8f92 100755 --- a/src/components/withKeyboardState.js +++ b/src/components/withKeyboardState.js @@ -7,7 +7,7 @@ import getComponentDisplayName from '../libs/getComponentDisplayName'; const KeyboardStateContext = createContext(null); const keyboardStatePropTypes = { /** Whether or not the keyboard is open */ - isShown: PropTypes.bool.isRequired, + isKeyboardShown: PropTypes.bool.isRequired, }; const keyboardStateProviderPropTypes = { @@ -20,7 +20,7 @@ class KeyboardStateProvider extends React.Component { super(props); this.state = { - isShown: false, + isKeyboardShown: false, }; } @@ -28,13 +28,13 @@ class KeyboardStateProvider extends React.Component { this.keyboardDidShowListener = Keyboard.addListener( 'keyboardDidShow', () => { - this.setState({isShown: true}); + this.setState({isKeyboardShown: true}); }, ); this.keyboardDidHideListener = Keyboard.addListener( 'keyboardDidHide', () => { - this.setState({isShown: false}); + this.setState({isKeyboardShown: false}); }, ); } diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e5ef02a81008..35149943c78a 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -432,7 +432,7 @@ class ReportActionCompose extends React.Component { */ triggerHotkeyActions(e) { // Do not trigger actions for mobileWeb or native clients that have the keyboard open because for those devices, we want the return key to insert newlines rather than submit the form - if (!e || this.props.isSmallScreenWidth || this.props.isShown) { + if (!e || this.props.isSmallScreenWidth || this.props.isKeyboardShown) { return; } diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 7c104289d118..0f65c3634025 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -202,7 +202,7 @@ class ReportActionItemMessageEdit extends React.Component { */ triggerSaveOrCancel(e) { // Do not trigger actions for mobileWeb or native clients that have the keyboard open because for those devices, we want the return key to insert newlines rather than submit the form - if (!e || this.props.isSmallScreenWidth || this.props.isShown) { + if (!e || this.props.isSmallScreenWidth || this.props.isKeyboardShown) { return; } if (e.key === 'Enter' && !e.shiftKey) { diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index c692c93c868e..5f3ccb8a268a 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -10,7 +10,7 @@ import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; -import withKeyboardState from '../../../components/withKeyboardState'; +import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; @@ -27,12 +27,12 @@ const propTypes = { ...withLocalizePropTypes, ...windowDimensionsPropTypes, + ...keyboardStatePropTypes, }; const SignInPageContent = (props) => { const dismissKeyboardWhenTappedOutsideOfInput = () => { - // This prop comes from withKeyboardState - if (!props.isShown) { + if (!props.isKeyboardShown) { return; } Keyboard.dismiss();