[Awaiting Payment 2024-01-30] [$2000] We can send an empty message using dictation on iPhone

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Open App
2. Go to any chat
3. Press on the message composer
4. Press the mic icon from the keyboard and do not speak anything
5. Press the mic icon again to stop dictation

Expected Result:

If we have not spoken anything then send button should have to be disabled

Actual Result:

Send button is enabled on an empty message and we can send the empty message in the chat

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.7
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

dictate-bug.MP4

VSSR0553.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @jayeshmangwani
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682627289846559

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fe24292fbc44e5d8
• Upwork Job ID: 1651956178824339456
• Last Price Increase: 2023-05-08

[MelvinBot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[hungvu193]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We can send an empty message using dictation on iPhone

What is the root cause of that problem?

We are checking if comment is empty to disable the send button, however the result return from empty dictation in iPhone was a escape character \ufffc, that's why our regex didn't work and button still can be enable.

App/src/pages/home/report/ReportActionCompose.js

Line 578 in 6fb0969

isCommentEmpty: !!newComment.match(/^(\s)*$/),

What changes do you think we should make in order to solve the problem?

Add more condition to our isCommentEmpty's regex to prevent such thing. So our regex will look like:

isCommentEmpty: !!newComment.match(/^(\s|\ufffc)*$/),

What alternative solutions did you explore? (Optional)

None.

Result:

Screen.Recording.2023-04-28.at.10.08.56.mov

[trjExpensify]

I can reliably reproduce this. Moving on External.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01fe24292fbc44e5d8

[MelvinBot]

Current assignee @trjExpensify is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External)

[MelvinBot]

Triggered auto assignment to @flodnv (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[MelvinBot]

📣 @DmytroDumas! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[hellohublot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We can send an empty message using dictation on iPhone

What is the root cause of that problem?

When we start using the dictation on the keyboard, the system will automatically generate a _UITextPlaceholderAttachment, when the speech recognition ends, the system will delete _UITextPlaceholderAttachment and replace it with the recognized text, but when we pass _UI TextPlaceholderAttachment to Javascript , we will force convert _UITextPlaceholderAttachment object to \uFFFC, so after the system speech recognition is completed, the _UITextPlaceholderAttachment cannot be found.

What changes do you think we should make in order to solve the problem?

Solution A:
We can simply ignore \uFFFC in javascript, and the system will automatically delete this character after the speech recognition is completed

- onChangeText={comment => this.updateComment(comment, true)}
+ onChangeText={comment => /\uFFFC+/.test(comment) ? null : this.updateComment(comment, true)}

Solution B:
We can merge facebook/react-native#37188 into Expensify/react-native, then we modify

- disabled={isBlockedFromConcierge || this.props.disabled}
+ disabled={isBlockedFromConcierge || this.props.disabled || /\uFFFC+/.test(this.state.value)}

I recommend solution A more, because we don't want to change the `disable` of all send buttons

[svendev2024]

React Native is a powerful tool for developing cross-platform mobile apps, and I have extensive experience in working with it. I have encountered similar issues in the past and am confident that I have the skills and expertise to resolve this for you.

To fix the issue, we need to disable the send button if the user has not spoken any message. We can achieve this by using the onStartListening and onEndListening methods provided by the dictation library. These methods allow us to track the state of the dictation session, and we can use this information to enable/disable the send button accordingly.

Also we can fix as follow code:
onChangeText={comment => this.updateComment(comment.replace(/\uFFFC/g, ''), true)}

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01fe1403955a8aad55

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Santhosh-Sellavel]

Quick thoughts

Seems the @hellohublot's proposal is straight forward one here

We should address this at all places, not just here

We can even do all the replacements in BaseTextInput, because they should not be sent to other platforms

cc: @flodnv

[flodnv]

Thanks @Santhosh-Sellavel. This is strange...

the system always add a \uFFFC at the end of the text

@hellohublot are we sure this is due to the OS and not React Native? This StackOverflow post may suggest that yes, it's the OS?

[hellohublot]

@flodnv @Santhosh-Sellavel
Thanks.

I investigated further and it is indeed a React Native issue.
I updated my proposal and the root cause, I also submitted a PR to the upstream. and I would prefer Solution A

[Santhosh-Sellavel]

@hellohublot I'm not sure

/\uFFFC+/ Having this check on multiple places is a bad idea, we need to handle this at a single place for addressing this at every inputs

[hellohublot]

@Santhosh-Sellavel Thanks

Thanks, but the following video looks like we don’t need to change the disabled state. When every button is clicked, the system will interrupt the dictation first, then update the text, and then respond to the button click, so we only need to wait for the Upstream PR to be merged, and then update version or merge it into Expensify/react-native

_after.mp4

[hellohublot]

@flodnv It seems that another issue will be solved too, both are iOS16+ to reproduce, I tested both can be solved

Would you mind holding the other one (it doesn't have a proposal yet), or raising the bounty on this one, because it did cost me some time and I didn't find any solution through google

[flodnv]

#31558 is on prod!!! 😱 Can someone retest this on iPhone please? 🙏

[Santhosh-Sellavel]

@flodnv It's fixed now, tested now.

1.4.24 Issue Exists

Before_iOS.mp4

1.4.28 Works Fine

Latest.Version.mp4

[flodnv]

Hooray!!!! 😍

@trjExpensify finally we can issue payments here!!! 💸

Once again, thanks for fixing this @hellohublot 👍

[trjExpensify]

Niceeee! Okay, so confirming these are the payments?

• @hellohublot $2000 for the fix
• @Santhosh-Sellavel $2000 for C+ reviews
• @jayeshmangwani $250 for the bug report (grandfathered rate at the time of issue creation)

[trjExpensify]

Thanks for confirming, Flo.

@Santhosh-Sellavel - go ahead and request.
@hellohublot - offer sent
@jayeshmangwani - offer sent

Putting this on Daily and Awaiting payment to float it higher in my priority list :)

[trjExpensify]

@hellohublot - paid!

[trjExpensify]

@jayeshmangwani - paid!

@Santhosh-Sellavel once you confirm you've requested, I'll go ahead and close this.

[trjExpensify]

Bump @Santhosh-Sellavel! Confirm you've requested, please.

[trjExpensify]

Mic check 1, 2.. @Santhosh-Sellavel you there? 😅

[Santhosh-Sellavel]

Will request this week. Feel free to close

[trjExpensify]

Thanks!

[Santhosh-Sellavel]

Requested on ND

[JmillsExpensify]

$2,000 approved for @Santhosh-Sellavel based on the summary above.