From 401d1e974f2156000d820d341853736dc964fbb4 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 17 May 2023 10:35:25 +0700 Subject: [PATCH 1/4] fix: double click composo box and select placeholder --- src/styles/styles.js | 6 +++--- web/index.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index ca8c38cfde2c..83f82ee39d6b 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1547,8 +1547,8 @@ const styles = { // paddingVertical: 0, alignSelf: 'center', and textAlignVertical: 'center' paddingHorizontal: variables.avatarChatSpacing, - paddingTop: 0, - paddingBottom: 0, + paddingTop: 5, + paddingBottom: 5, alignSelf: 'center', textAlignVertical: 'center', }, @@ -1569,7 +1569,7 @@ const styles = { // composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669 textInputComposeSpacing: { - paddingVertical: 5, + paddingVertical: 0, ...flex.flexRow, flex: 1, }, diff --git a/web/index.html b/web/index.html index aa7735079384..a2e691af06d8 100644 --- a/web/index.html +++ b/web/index.html @@ -40,7 +40,7 @@ #no-drag-area { -webkit-app-region: no-drag; } - input::placeholder { + input::placeholder, textarea::placeholder { user-select: none; -webkit-user-select: none } From 12849ab8be679dc1cf614ee12b93bdaa46cd2e9a Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 17 May 2023 20:55:05 +0700 Subject: [PATCH 2/4] fix: width compose input when multiple lines --- src/pages/home/report/ReportActionCompose.js | 2 +- src/styles/styles.js | 23 ++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index b3ec4dabc0b8..cccc65386e89 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -1039,7 +1039,7 @@ class ReportActionCompose extends React.Component { placeholderTextColor={themeColors.placeholderText} onChangeText={(comment) => this.updateComment(comment, true)} onKeyPress={this.triggerHotkeyActions} - style={[styles.textInputCompose, this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]} + style={[this.props.numberOfLines > 1 ? styles.textInputComposeMultiLines : styles.textInputCompose , this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]} maxLines={this.state.maxLines} onFocus={() => this.setIsFocused(true)} onBlur={() => { diff --git a/src/styles/styles.js b/src/styles/styles.js index c66a2a30034e..e629acb29ae9 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1532,6 +1532,29 @@ const styles = { // Be extremely careful when editing the compose styles, as it is easy to introduce regressions. // Make sure you run the following tests against any changes: #12669 textInputCompose: addOutlineWidth( + { + backgroundColor: themeColors.componentBG, + borderColor: themeColors.border, + color: themeColors.text, + fontFamily: fontFamily.EMOJI_TEXT_FONT, + fontSize: variables.fontSizeNormal, + borderWidth: 0, + height: 'auto', + lineHeight: variables.lineHeightXLarge, + ...overflowXHidden, + + // On Android, multiline TextInput with height: 'auto' will show extra padding unless they are configured with + // paddingVertical: 0, alignSelf: 'center', and textAlignVertical: 'center' + + paddingHorizontal: variables.avatarChatSpacing, + paddingTop: 9, + paddingBottom: 9, + alignSelf: 'center', + textAlignVertical: 'center', + }, + 0, + ), + textInputComposeMultiLines: addOutlineWidth( { backgroundColor: themeColors.componentBG, borderColor: themeColors.border, From 7dd7d801afac9752f0c3b9ff154805fbf6dd3dec Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 17 May 2023 22:58:24 +0700 Subject: [PATCH 3/4] fix lint --- src/components/Pressable/PressableWithFeedback.js | 7 +++---- src/pages/home/report/ReportActionCompose.js | 5 ++++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 0f4c07c63f64..9e475b7169cf 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -46,10 +46,9 @@ const PressableWithFeedback = forwardRef((props, ref) => { setDisabled(props.disabled); return; } - onPress - .finally(() => { - setDisabled(props.disabled); - }); + onPress.finally(() => { + setDisabled(props.disabled); + }); }); }} > diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index cccc65386e89..4a1ded41acc3 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -1039,7 +1039,10 @@ class ReportActionCompose extends React.Component { placeholderTextColor={themeColors.placeholderText} onChangeText={(comment) => this.updateComment(comment, true)} onKeyPress={this.triggerHotkeyActions} - style={[this.props.numberOfLines > 1 ? styles.textInputComposeMultiLines : styles.textInputCompose , this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4]} + style={[ + this.props.numberOfLines > 1 ? styles.textInputComposeMultiLines : styles.textInputCompose, + this.props.isComposerFullSize ? styles.textInputFullCompose : styles.flex4, + ]} maxLines={this.state.maxLines} onFocus={() => this.setIsFocused(true)} onBlur={() => { From eb5a67da20bd22eb19d4af92803a6e4873f55370 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 18 May 2023 00:20:35 +0700 Subject: [PATCH 4/4] remove useless comment --- src/styles/styles.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index e629acb29ae9..e4bb7cf1ad28 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1565,10 +1565,6 @@ const styles = { height: 'auto', lineHeight: variables.lineHeightXLarge, ...overflowXHidden, - - // On Android, multiline TextInput with height: 'auto' will show extra padding unless they are configured with - // paddingVertical: 0, alignSelf: 'center', and textAlignVertical: 'center' - paddingHorizontal: variables.avatarChatSpacing, paddingTop: 5, paddingBottom: 5,