From 41c8a4e552d22358a652ed4f2364cff3e2d29c2c Mon Sep 17 00:00:00 2001 From: Ali Abbas Malik Date: Fri, 4 Jun 2021 06:22:24 -0700 Subject: [PATCH 1/6] [IS-3186] Fixed cursor position issue on Android --- src/pages/home/report/ReportActionCompose.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index e1f0fecebbf8..d45505570e5b 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -51,6 +51,7 @@ import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import ReportActionPropTypes from './ReportActionPropTypes'; import {canEditReportAction} from '../../../libs/reportUtils'; +import getPlatform from '../../../libs/getPlatform/index'; const propTypes = { /** A method to call when the form is submitted */ @@ -124,6 +125,7 @@ class ReportActionCompose extends React.Component { this.focusEmojiSearchInput = this.focusEmojiSearchInput.bind(this); this.measureEmojiPopoverAnchorPosition = this.measureEmojiPopoverAnchorPosition.bind(this); this.onSelectionChange = this.onSelectionChange.bind(this); + this.updateSelectionOnAndroid = this.updateSelectionOnAndroid.bind(this); this.emojiPopoverAnchor = null; this.emojiSearchInput = null; @@ -166,7 +168,10 @@ class ReportActionCompose extends React.Component { } onSelectionChange(e) { - this.setState({selection: e.nativeEvent.selection}); + const selection = e.nativeEvent.selection; + this.setState({selection}, () => { + this.updateSelectionOnAndroid(this.comment, selection); + }); } /** @@ -196,6 +201,12 @@ class ReportActionCompose extends React.Component { this.setState({isMenuVisible}); } + updateSelectionOnAndroid(text, selection) { + if (getPlatform() === 'android') { + this.textInput.setNativeProps({text, selection}); + } + } + /** * Focus the composer text input */ @@ -313,7 +324,9 @@ class ReportActionCompose extends React.Component { start: selection.start + emoji.length, end: selection.start + emoji.length, }; - this.setState({selection: updatedSelection}); + this.setState({selection: updatedSelection}, () => { + this.updateSelectionOnAndroid(this.textInput.value, updatedSelection); + }); this.setIsFocused(true); this.focus(); this.updateComment(this.textInput.value); From ec6ed7cbab7d8d3eb2fde40b0558b571bb10d48b Mon Sep 17 00:00:00 2001 From: Ali Abbas Malik Date: Tue, 8 Jun 2021 03:37:19 -0700 Subject: [PATCH 2/6] [IS-3186] Fixed cursor issue on android --- .../TextInputFocusable/index.android.js | 79 +++++++++++++++++++ src/pages/home/report/ReportActionCompose.js | 18 +---- 2 files changed, 82 insertions(+), 15 deletions(-) create mode 100644 src/components/TextInputFocusable/index.android.js diff --git a/src/components/TextInputFocusable/index.android.js b/src/components/TextInputFocusable/index.android.js new file mode 100644 index 000000000000..ba1bc997e736 --- /dev/null +++ b/src/components/TextInputFocusable/index.android.js @@ -0,0 +1,79 @@ +import React from 'react'; +import {TextInput} from 'react-native'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import themeColors from '../../styles/themes/default'; + +/** + * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in + * the way of the view + */ + +const propTypes = { + /** If the input should clear, it actually gets intercepted instead of .clear() */ + shouldClear: PropTypes.bool, + + /** A ref to forward to the text input */ + forwardedRef: PropTypes.func, + + /** When the input has cleared whoever owns this input should know about it */ + onClear: PropTypes.func, + + /** Set focus to this component the first time it renders. + * Override this in case you need to set focus on one field out of many, or when you want to disable autoFocus */ + autoFocus: PropTypes.bool, + + /** Prevent edits and interactions like focus for this input. */ + isDisabled: PropTypes.bool, + +}; + +const defaultProps = { + shouldClear: false, + onClear: () => {}, + autoFocus: false, + isDisabled: false, + forwardedRef: null, +}; + +class TextInputFocusable extends React.Component { + componentDidMount() { + // This callback prop is used by the parent component using the constructor to + // get a ref to the inner textInput element e.g. if we do + // this.textInput = el} /> this will not + // return a ref to the component, but rather the HTML element by default + if (this.props.forwardedRef && _.isFunction(this.props.forwardedRef)) { + this.props.forwardedRef(this.textInput); + } + } + + componentDidUpdate(prevProps) { + if (!prevProps.shouldClear && this.props.shouldClear) { + this.textInput.clear(); + this.props.onClear(); + } + } + + render() { + return ( + this.textInput = el} + maxHeight={116} + rejectResponderTermination={false} + editable={!this.props.isDisabled} + /* eslint-disable-next-line react/jsx-props-no-spreading */ + {...this.props} + /> + ); + } +} + +TextInputFocusable.displayName = 'TextInputFocusable'; +TextInputFocusable.propTypes = propTypes; +TextInputFocusable.defaultProps = defaultProps; + +export default React.forwardRef((props, ref) => ( + /* eslint-disable-next-line react/jsx-props-no-spreading */ + +)); diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index d45505570e5b..2b74e032794d 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -51,7 +51,6 @@ import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import ReportActionPropTypes from './ReportActionPropTypes'; import {canEditReportAction} from '../../../libs/reportUtils'; -import getPlatform from '../../../libs/getPlatform/index'; const propTypes = { /** A method to call when the form is submitted */ @@ -125,7 +124,6 @@ class ReportActionCompose extends React.Component { this.focusEmojiSearchInput = this.focusEmojiSearchInput.bind(this); this.measureEmojiPopoverAnchorPosition = this.measureEmojiPopoverAnchorPosition.bind(this); this.onSelectionChange = this.onSelectionChange.bind(this); - this.updateSelectionOnAndroid = this.updateSelectionOnAndroid.bind(this); this.emojiPopoverAnchor = null; this.emojiSearchInput = null; @@ -168,10 +166,7 @@ class ReportActionCompose extends React.Component { } onSelectionChange(e) { - const selection = e.nativeEvent.selection; - this.setState({selection}, () => { - this.updateSelectionOnAndroid(this.comment, selection); - }); + this.setState({selection: e.nativeEvent.selection}); } /** @@ -201,12 +196,6 @@ class ReportActionCompose extends React.Component { this.setState({isMenuVisible}); } - updateSelectionOnAndroid(text, selection) { - if (getPlatform() === 'android') { - this.textInput.setNativeProps({text, selection}); - } - } - /** * Focus the composer text input */ @@ -244,6 +233,7 @@ class ReportActionCompose extends React.Component { * @param {String} newComment */ updateComment(newComment) { + this.textInput.setNativeProps({text: newComment}); this.setState({ isCommentEmpty: newComment.length === 0, }); @@ -324,9 +314,7 @@ class ReportActionCompose extends React.Component { start: selection.start + emoji.length, end: selection.start + emoji.length, }; - this.setState({selection: updatedSelection}, () => { - this.updateSelectionOnAndroid(this.textInput.value, updatedSelection); - }); + this.setState({selection: updatedSelection}); this.setIsFocused(true); this.focus(); this.updateComment(this.textInput.value); From 4f25798bb6f1a115d3750b64f35c0dd3ed716858 Mon Sep 17 00:00:00 2001 From: Ali Abbas Malik Date: Tue, 8 Jun 2021 10:11:45 -0700 Subject: [PATCH 3/6] [IS-3186] renamed file TextInputFocusable/index.native.js -> TextInputFocusable/index.ios.js --- .../TextInputFocusable/{index.native.js => index.ios.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/TextInputFocusable/{index.native.js => index.ios.js} (100%) diff --git a/src/components/TextInputFocusable/index.native.js b/src/components/TextInputFocusable/index.ios.js similarity index 100% rename from src/components/TextInputFocusable/index.native.js rename to src/components/TextInputFocusable/index.ios.js From 50824624f65f709a76691cbc9eed51d4d5734e26 Mon Sep 17 00:00:00 2001 From: Ali Abbas Malik Date: Tue, 8 Jun 2021 10:30:09 -0700 Subject: [PATCH 4/6] [IS-3186] added comment for seperation textinput ios and android file --- src/components/TextInputFocusable/index.android.js | 1 + src/components/TextInputFocusable/index.ios.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/TextInputFocusable/index.android.js b/src/components/TextInputFocusable/index.android.js index ba1bc997e736..b99b1afa4332 100644 --- a/src/components/TextInputFocusable/index.android.js +++ b/src/components/TextInputFocusable/index.android.js @@ -7,6 +7,7 @@ import themeColors from '../../styles/themes/default'; /** * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in * the way of the view + * In Android I need selection prop for TextInput but for IOS selection prop have some issues */ const propTypes = { diff --git a/src/components/TextInputFocusable/index.ios.js b/src/components/TextInputFocusable/index.ios.js index 9d6aa1d9a29d..1055693ac843 100644 --- a/src/components/TextInputFocusable/index.ios.js +++ b/src/components/TextInputFocusable/index.ios.js @@ -7,6 +7,7 @@ import themeColors from '../../styles/themes/default'; /** * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in * the way of the view + * In Android I need selection prop for TextInput but for IOS selection prop have some issues */ const propTypes = { From 136c178b020205a689dcad317440950529a05fe3 Mon Sep 17 00:00:00 2001 From: Ali Abbas Malik Date: Tue, 8 Jun 2021 10:35:34 -0700 Subject: [PATCH 5/6] [IS-3186] added issue link --- src/components/TextInputFocusable/index.android.js | 3 ++- src/components/TextInputFocusable/index.ios.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/TextInputFocusable/index.android.js b/src/components/TextInputFocusable/index.android.js index b99b1afa4332..9ea0e5396326 100644 --- a/src/components/TextInputFocusable/index.android.js +++ b/src/components/TextInputFocusable/index.android.js @@ -7,7 +7,8 @@ import themeColors from '../../styles/themes/default'; /** * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in * the way of the view - * In Android I need selection prop for TextInput but for IOS selection prop have some issues + * In Android I need selection prop for TextInput but for IOS selection prop have some issues + * https://github.com/facebook/react-native/issues/29063 */ const propTypes = { diff --git a/src/components/TextInputFocusable/index.ios.js b/src/components/TextInputFocusable/index.ios.js index 1055693ac843..40cbb683e55c 100644 --- a/src/components/TextInputFocusable/index.ios.js +++ b/src/components/TextInputFocusable/index.ios.js @@ -8,6 +8,7 @@ import themeColors from '../../styles/themes/default'; * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in * the way of the view * In Android I need selection prop for TextInput but for IOS selection prop have some issues + * https://github.com/facebook/react-native/issues/29063 */ const propTypes = { From d8bf03e64fbcd63d68d9f1248a93f438d9aadfe0 Mon Sep 17 00:00:00 2001 From: Ali Abbas Malik Date: Tue, 8 Jun 2021 10:38:25 -0700 Subject: [PATCH 6/6] [IS-3186] update comment message --- src/components/TextInputFocusable/index.android.js | 2 +- src/components/TextInputFocusable/index.ios.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TextInputFocusable/index.android.js b/src/components/TextInputFocusable/index.android.js index 9ea0e5396326..b8f40a6bcc46 100644 --- a/src/components/TextInputFocusable/index.android.js +++ b/src/components/TextInputFocusable/index.android.js @@ -7,7 +7,7 @@ import themeColors from '../../styles/themes/default'; /** * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in * the way of the view - * In Android I need selection prop for TextInput but for IOS selection prop have some issues + * On Android, the selection prop is required on the TextInput but this prop has issues on IOS * https://github.com/facebook/react-native/issues/29063 */ diff --git a/src/components/TextInputFocusable/index.ios.js b/src/components/TextInputFocusable/index.ios.js index 40cbb683e55c..a0b9967d4086 100644 --- a/src/components/TextInputFocusable/index.ios.js +++ b/src/components/TextInputFocusable/index.ios.js @@ -7,7 +7,7 @@ import themeColors from '../../styles/themes/default'; /** * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in * the way of the view - * In Android I need selection prop for TextInput but for IOS selection prop have some issues + * On Android, the selection prop is required on the TextInput but this prop has issues on IOS * https://github.com/facebook/react-native/issues/29063 */