Skip to content
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

Fix enter key listeners with IME languages #16065

Merged
merged 23 commits into from
May 3, 2023
Merged

Conversation

hayata-suenaga
Copy link
Contributor

@hayata-suenaga hayata-suenaga commented Mar 16, 2023

Details

When tying in a language that requires IME, don't trigger text submit event / callback on Enter while the text is being composed.

This is from a slack message where I describe the problem and the expected behavior in detail.

When some roman languages are inputted into text fields on NewDot, the app causes premature Enter key behavior. Some languages (Japanese, Korean, Chinese...) need to make character selection when typing using IME, and this selection is done by hitting Enter.
Almost all places on the current codebase that use any kind of text input, however, are listening to Enter keyboard event and considering it as a sign for submission. For example, every character selection i make in Japanese results on chat submission and I cannot send any sentence in the language.

Fixed Issues

$ GH_LINK #15798
PROPOSAL: GH_LINK_ISSUE(COMMENT)

Tests / QA Tests

The tests steps for this PR is long, as this PR modified behaviors for text inputting, which is used across the App. We want to be extra careful that this PR didn't break what's working.

Changed Behaviors

Test what have been changed. In the following test steps, you'll test text input behaviors for both Japanese and English. When you're using English, you're testing that typing in English works as normal. When you're using Japanese, you're testing that the issue with typing in Japanese has been fixed.

For engineers: The following steps test KeyboardShortcut.bindHandlerToKeydownEvent (used in ReportActionComposer as well as other components), EmojiPickerMenu and FormSubmit (used in AddDebitCardPage).

  1. Open NewDot on desktop web (chrome and safari) and native desktop app
  2. Go to a chat room
  3. Open the developer console and make sure that no error is outputted throughout the following process.
  4. Type in English. When you hit enter, the text should be sent.
  5. Type in Japanese. When you hit enter, the text should be confirmed (realize the text underline will be removed). The text should not be sent at this point. Hit enter again and the text should be sent.
  6. Open the emoji picker (it's only available when the browser screen is big enough)
  7. Type "smile" in English. When you hit enter, the highlighted emoji (smile emoji) should be inputted into the chat text field
  8. Type "smile" while the input mode is in Japanese. The text that appears will be gibberish but you should see a popup selection tool appears. That popover should contain the option for smile. Highlight the first option on the popover by pressing Tab key. Hit Enter to select it. Hit Enter again to confirm the text. Hit Enter again to select the highlighted emoji. I know this is a lot of Enter presses, but this is the normal behavior when inputting Japanese language.
  9. Go to Setting -> Payment -> Add payment method -> Add Debit card
  10. Type something on the card holder name field in English. Hit Enter. Confirm that the form submission is attempted by observing other fields returning red with error messages.
  11. Go back one step back to clear error messages
  12. Type something on the card holder name field in Japanese. Hit Enter. Confirm that submission is NOT attempted by observing that other fields are NOT turned red. Hit Enter again and confirm that the form submission is attempted by observing other fields returning red with error messages.

Unchanged Behaviors

Typing on NewDot running on Android or iOS or mobile web is already working correctly before this PR. Check the behavior of the text input is same as the current one by running this PR on simulators/emulators.

I also attached videos below checking that text input behavior on native Android/iOS devices and mobile web is not affected by this PR.

Offline tests

N/A

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android / native
    • Android / Chrome
    • iOS / native
    • iOS / Safari
    • MacOS / Chrome / Safari
    • MacOS / Desktop
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
      • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
  • I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web Chrome
chat English
chrome.chat.en.mov
chat Japanese
chrome.chat.jp.mov
emoji English
chrome.emoji.en.mov
emoji Japanese
chrome.emoji.jp.mov
card English
chrome.card.en.mov
card Japanese
chrome.card.jp.mov
Web Safari
chat English
safari.chat.en.mov
chat Japanese
safari.chat.jp.mov
emoji English
safari.emoji.en.mov
emoji Japanese
safari.emoji.jp.mov
card English
safari.card.en.mov
card Japanese
safari.card.jp.mov
Mobile Web - Chrome
Mobile Web - Chrome Chat English and Japanese
android.webm
Mobile Web - Chrome Card English and Japanese
Screen.Recording.2023-04-06.at.3.44.12.PM.mov
Mobile Web - Safari
Mobile Web - Safari Chat English and Japanese
ios.chat.mp4
Mobile Web - Safari Card English and Japanese
ios.card.mp4
Desktop
chat English
desktop.chat.en.mov
chat Japanese
desktop.chat.jp.mov
emoji English
destkop.emoji.en.mov
emoji Japanese
desktop.emoji.jp.mov
card English
desktop.card.en.mov
card Japanese
desktop.card.jp.mov
iOS
ios.mp4
Android
android.webm

@hayata-suenaga hayata-suenaga changed the title Hayata fix enter key listeners Fix enter key listeners Mar 16, 2023
@hayata-suenaga
Copy link
Contributor Author

hayata-suenaga commented Mar 17, 2023

This PR causes a minor regression on Android chrome.

The regression is that on any TextInput inside Form component (ex. the name field of AddDebitCardPage), pressing -> on Gboard (Android's default keyboard) does not lead to submission no matter how many times you click the -> button. You can submit the input if you click the space bar.

On Android devices that uses Gboard (default), when you type text into any text fields on Chrome browser, isComposing is set to true even when the input is in English. If you're Android user, you might recall that whenever you type, an underline appears under text types. This underline is an indication that the text underlines is in composition.

I don't know if this constitutes as a regression. Please let me know your opinions.

This does not happen on ReportActionCompose (chat text field)

Screen.Recording.2023-03-17.at.2.56.18.PM.mov

@MelvinBot
Copy link

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

@hayata-suenaga hayata-suenaga marked this pull request as ready for review March 18, 2023 06:10
@hayata-suenaga hayata-suenaga requested a review from a team as a code owner March 18, 2023 06:10
@melvin-bot melvin-bot bot requested review from thienlnam and removed request for a team March 18, 2023 06:11
@MelvinBot
Copy link

@thienlnam Please 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]

@hayata-suenaga hayata-suenaga changed the title Fix enter key listeners Fix enter key listeners with IME languages Mar 18, 2023
@hayata-suenaga hayata-suenaga self-assigned this Mar 18, 2023
* @param {Event} event
* @returns {boolean}
*/
const isEnterWhileComposition = (event) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The naming for this method is a little confusing, what is the difference between this and when the enter key is pressed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usually, when you type in English, the moment you inputted a character, the character is considered already "composed". However, in other languages that uses IME, the character you type is not considered "composed", meaning that the text is still in "draft" mode. When you type Enter while the text is still draft mode, it's enterWhileComposing. However, once the text is confirmed ("composed"), it's Enter key event that happens outside composition flow.

I took hint for the variable name from KeyboardEvent.isComposing (doc).

src/libs/KeyboardShortcut/index.native.js Outdated Show resolved Hide resolved
@thienlnam
Copy link
Contributor

The regression is that on any TextInput inside Form component (ex. the name field of AddDebitCardPage), pressing -> on Gboard (Android's default keyboard) does not lead to submission no matter how many times you click the -> button.

This seems like a regression we should try to solve in this PR.

You can submit the input if you click the space bar.

Is this not bad? Space should act as a space and not submit right..?

@thienlnam
Copy link
Contributor

Also, let's have this PR reviewed by a C+ as well since it's a big change that could use some thorough testing

@hayata-suenaga
Copy link
Contributor Author

@thienlnam thank yo for the quick review. I requested a review from @mananjadhav.

Is this not bad? Space should act as a space and not submit right..?

What I meant is the Gboard seems to consider even English input as in "draft" until you hit space.

So the workaround for the regression is that you hit 'space', delete one empty space entered, and hit Enter.

This is not a desired behavior and I'm going to investigate more how we can avoid this.

@mananjadhav
Copy link
Collaborator

I'll get to this by tomorrow. I am still going through the issue and the test steps. I'll check the current problem, the fix and also review the code.

@mananjadhav
Copy link
Collaborator

@hayata-suenaga I tried reproducing this on API 33 and API 30. I couldn't reproduce on either of the versions of Android emulator. Quick question though, do we know how many of the users actually use API 30?

Because I do get the following error on API 30, when I load the app for the first time.

Error: Not supported on Android
    at promiseMethodWrapper (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:4894:45)
    at setForegroundPresentationOptions (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:213136:67)
    at init (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:212066:74)
    at callback (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:210845:39)
    at _loop2 (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:127020:28)
    at keyChanged (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:127073:25)
    at anonymous (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:127202:24)
    at tryCallOne (/Users/andrew/Expensidev/react-native/ReactAndroid/hermes-engine/.cxx/Release/4fg4c1h4/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:53:16)
    at anonymous (/Users/andrew/Expensidev/react-native/ReactAndroid/hermes-engine/.cxx/Release/4fg4c1h4/arm64-v8a/lib/InternalBytecode/InternalBytecode.js:139:27)
    at apply (native)
    at anonymous (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:28060:26)
    at _callTimer (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:27975:17)
    at _callReactNativeMicrotasksPass (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:28008:17)
    at callReactNativeMicrotasks (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:28172:44)
    at __callReactNativeMicrotasks (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:5277:46)
    at anonymous (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:5077:45)
    at __guard (http://localhost:8083/index.bundle?platform=android&dev=true&minify=false&app=com.expensify.chat&modulesOnly=false&runModule=true:5257:1

Is it safe to say we can ignore API 30? The error is related to Airship.

@hayata-suenaga
Copy link
Contributor Author

@mananjadhav thank you for testing this. Could you tell me which part you couldn't reproduce? The original issue? (the original issue - premature sending of texts - only happens on web).

And the regression (form cannot be submitted on enter on Android with Gboard) has been already solved.

Could you also tell me when did you see the error (what action triggers the error you pasted)?

@hayata-suenaga
Copy link
Contributor Author

@mananjadhav bump

@thienlnam
Copy link
Contributor

@hayata-suenaga Could you also please resolve the merge conflicts in PR as well?

@mananjadhav
Copy link
Collaborator

I am so sorry I missed notification on this. @hayata-suenaga Could you please resolve the conflicts and I can test.

To answer the above questions, I tested on Android emulator API 30 and API 33, and the change worked fine on both the versions. I don't have a physical device with Gboard to test at the moment.

Hayata Suenaga added 4 commits May 2, 2023 08:55
@hayata-suenaga
Copy link
Contributor Author

@mananjadhav I solved the merge conflicts. CI tests are failing but I don't these tests are related to this PR.

@mananjadhav
Copy link
Collaborator

@hayata-suenaga Are you able to test this on the Android with the latest merge?

 DEBUG  [info] [BootSplash] hiding splash screen - ""
 ERROR  TypeError: undefined is not a function

This error is located at:
    in KeyboardShortcutsModal (created by withOnyx(KeyboardShortcutsModal))
    in withOnyx(KeyboardShortcutsModal)
    in Unknown
    in withLocalize(Component)
    in withWindowDimensions(withLocalize(Component)) (created by Expensify)
    in DeeplinkWrapper (created by Expensify)
    in Expensify (created by withOnyx(Expensify))
    in withOnyx(Expensify)
    in Unknown
    in withLocalize(Component) (created by App)
    in BaseErrorBoundary (created by App)
    in PickerStateProvider (created by ComposeProviders)
    in KeyboardStateProvider (created by ComposeProviders)
    in WindowDimensionsProvider (created by ComposeProviders)


DEBUG  [alrt] NewExpensify crash caught by error boundary - undefined is not a function - {"errorInfo":"{\"componentStack\":\"\\n    in KeyboardShortcutsModal (created by withOnyx(KeyboardShortcutsModal))\\n    in withOnyx(KeyboardShortcutsModal)\\n    in Unknown\\n    in withLocalize(Component)\\n    in withWindowDimensions(withLocalize(Component)) (created by Expensify)\\n    in DeeplinkWrapper (created by Expensify)\\n    in Expensify (created by withOnyx(Expensify))\\n    in withOnyx(Expensify)\\n    in Unknown\\n    in withLocalize(Component) (created by App)\\n    in BaseErrorBoundary (created by App)\\n    in PickerStateProvider (created by ComposeProviders)\\n    in KeyboardStateProvider (created by ComposeProviders)\\n    in WindowDimensionsProvider (created by ComposeProviders)\\n    in RenderersPropsProvider (created by RenderHTMLConfigProvider)\\n    in ListStyleSpecsProvider (created by RenderHTMLConfigProvider)\\n    in SharedPropsProvider (created by RenderHTMLConfigProvider)\\n    in RenderRegistryProvider (created by RenderHTMLConfigProvider)\\n    in RenderHTMLConfigProvider (created by BaseHTMLEngineProvider)\\n    in TRenderEngineProvider (created by BaseHTMLEngineProvider)\\n    in BaseHTMLEngineProvider (created by HTMLEngineProvider)\\n    in HTMLEngineProvider (created by ComposeProviders)\\n    in LocaleContextProvider (created by withOnyx(LocaleContextProvider))\\n    in withOnyx(LocaleContextProvider)\\n    in Unknown (created by WithCurrentUserPersonalDetails(Component))\\n    in WithCurrentUserPersonalDetails(Component)\\n    in Unknown (created by withOnyx(Component))\\n    in withOnyx(Component) (created by withOnyx(LocaleContextProvider))\\n    in withOnyx(LocaleContextProvider) (created by ComposeProviders)\\n    in _default (created by ComposeProviders)\\n    in PortalProviderComponent (created by ComposeProviders)\\n    in RNCSafeAreaProvider (created by SafeAreaProvider)\\n    in SafeAreaProvider (created by ComposeProviders)\\n

It is because we have an empty KeyboardShortcut/index.native.js.

Copy link
Collaborator

@mananjadhav mananjadhav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The empty file src/libs/KeyboardShortcut/index.native.js is causing a crash on Android. Can we please delete the unwanted file or add noop?

@hayata-suenaga
Copy link
Contributor Author

oops fixed @mananjadhav thank you for pointing that out

@mananjadhav
Copy link
Collaborator

I have one random issue on iOS Safari, when switching between the keyboards the composer loses focus. It exists on staging as well.

mweb-safari-switch-keyboard-lose-focus.mp4

@mananjadhav
Copy link
Collaborator

Reviewer Checklist

  • I have verified the author checklist is complete (all boxes are checked off).
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the steps for local testing are in the Tests section
    • I verified the steps for Staging and/or Production testing are in the QA steps section
    • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I checked that screenshots or videos are included for tests on all platforms
  • I included screenshots or videos for tests on all platforms
  • I verified tests pass on all platforms & I tested again on:
    • Android / native
    • Android / Chrome
    • iOS / native
    • iOS / Safari
    • MacOS / Chrome / Safari
    • MacOS / Desktop
  • If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
    • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
    • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
  • If any new file was added I verified that:
    • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
  • If a new CSS style is added I verified that:
    • A similar style doesn't already exist
    • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
  • If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
  • I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web
web-ime-keyboard.mov
Mobile Web - Chrome
mweb-chrome-ime-keyboard.mov
Mobile Web - Safari
mweb-safari-ime-keyboard.mp4
Desktop
desktop-ime-keyboard.mov
iOS
ios-ime-keyboard.mov
Android
android-ime-keyboard.mov

Thanks @hayata-suenaga for the patience here. I completed the checklist and updated the screencasts for all the platform.

@mananjadhav
Copy link
Collaborator

@thienlnam All yours.

@hayata-suenaga
Copy link
Contributor Author

@mananjadhav thank you for your thorough testing.

I have one random issue on iOS Safari, when switching between the keyboards the composer loses focus. It exists on staging as well.

This seems to be a different issue. Have you reported this somewhere else?

@mananjadhav
Copy link
Collaborator

No. I am yet to check if it is just due to the Safari behavior.

Copy link
Contributor

@thienlnam thienlnam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, looks good thank you!

@thienlnam thienlnam merged commit 74e5d32 into main May 3, 2023
@thienlnam thienlnam deleted the hayata-fixEnterKeyListeners branch May 3, 2023 17:00
@OSBotify
Copy link
Contributor

OSBotify commented May 3, 2023

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify
Copy link
Contributor

OSBotify commented May 4, 2023

🚀 Deployed to staging by https://github.com/thienlnam in version: 1.3.10-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

OSBotify commented May 9, 2023

🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.12-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants