-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Standardize keyboard libs for determining when the keyboard is open #13629
Conversation
Self-requesting for review to keep this in my K2, but you should still Pullerbear someone since I'm gonna be OOO starting next week! |
@@ -285,6 +284,7 @@ ReportActionItemMessageEdit.defaultProps = defaultProps; | |||
export default compose( | |||
withLocalize, | |||
withWindowDimensions, | |||
withKeyboardState, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I added this HOC, since ReportActionItemMessageEdit
has it's own forwarded ref, I found out that this HOC isn't properly handling forwarded refs like the withWindowDimensions
HOC. This caused me to do a refactoring of withKeyboardState
so that it will better handle the forwarded refs.
@thesahindia @stitesExpensify One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code LGTM!
@@ -241,15 +240,15 @@ 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); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The main composer will hide when editing the message in decreased screen size on web/Desktop. Are we fine with that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I am OK with that. I think it's closer to what we want anyway where those smaller windows would act closer to our mobile platforms. Thanks for asking!
Reviewer Checklist
Screenshots/VideosWebScreen.Recording.2022-12-20.at.3.21.39.AM.movMobile Web - ChromeScreenrecording_20221220_031848.mp4Mobile Web - SafariScreen.Recording.2022-12-20.at.3.10.25.AM.movDesktopScreen.Recording.2022-12-20.at.3.20.58.AM.moviOSScreen.Recording.2022-12-20.at.3.06.59.AM.movAndroidScreen.Recording.2022-12-20.at.3.12.11.AM.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Performance Comparison Report 📊Significant Changes To DurationThere are no entries Meaningless Changes To DurationShow entries
Show details
|
🚀 Deployed to staging by @stitesExpensify in version: 1.2.42-0 🚀
|
🚀 Deployed to production by @yuwenmemon in version: 1.2.42-2 🚀
|
@@ -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 because for those devices, we want the return key to insert newlines rather than submit the form | |||
if (!e || this.props.isSmallScreenWidth || this.props.isKeyboardShown) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did we test it against resized the Desktop app? I think we do not want that to behave like mobile app as that does not have Virtual Keyboard.
cc: @thesahindia
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is expected (#13629 (comment), slack thread)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for sharing. Hmm, I can't give my full approval here without testing but let's hope there are no regressions from this. Anyways, you approved so this should be OK.
@@ -13,6 +14,7 @@ const propTypes = { | |||
onToggleKeyboard: PropTypes.func, | |||
|
|||
...windowDimensionsPropTypes, | |||
...keyboardStatePropTypes, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey, we caused a console error with this change. #13862
Why? keyboardStatePropTypes
contains native only props but being used for all platforms.
@@ -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 because for those devices, we want the return key to insert newlines rather than submit the form | |||
if (!e || this.props.isSmallScreenWidth || this.props.isKeyboardShown) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi, just dropping a tiny tiny note that when a desktop window is resized to mobile, the Enter key behaviour changes and isn't consistent with full sized window.
Causing bug - #17206
Fixed Issues
$ #13582
Tests
For web/desktop:
For all mobile platforms:
Offline tests
Same as above
QA Steps
Same as above
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)ScrollView
component to make it scrollable when more elements are added to the page.Screenshots/Videos
Web
2022-12-16_09-38-42.mp4
Mobile Web - Chrome
2022-12-16_09-43-42.mp4
Mobile Web - Safari
2022-12-16_09-42-22.mp4
Desktop
2022-12-16_09-39-12.mp4
iOS
2022-12-16_09-41-21.mp4
Android
2022-12-16_09-43-01.mp4