[HOLD for payment 2024-08-29] [$250] Voice recognition doesn't work on mobile web on Android in the message compose input

[m-natarajan]

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

---

Version Number: 9.0.1-17
Reproducible in staging?: Yes
Reproducible in production?: Yes
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
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C05LX9D6E07/p1719169189159419

Action Performed:

1. Go to staging.new.expensify.com
2. Initiate a DM to any user
3. Tap mic icon on keyboard and say a message to be composed

Expected Result:

Message composed without any issues

Actual Result:

Voice recognition does not work if you begin it in an empty field, lose focus and it stops

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f063fe0495eff4ac
• Upwork Job ID: 1805694285589168826
• Last Price Increase: 2024-08-08
• Automatic offers:
• eh2077 | Reviewer | 103185927

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot]

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @deetergp (AutoAssignerNewDotQuality)

[deetergp]

This one seems like it could be done by an External contributor.

[melvin-bot]

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

[melvin-bot]

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

[diegohosilver]

I was able to reproduce it in dev and stage

Recording.2024-06-27.095218.mp4

[MitchExpensify]

@diegohosilver It looks like its working in your video, am I missing something?

[diegohosilver]

@MitchExpensify the focus is interrupted when the input is empty. I had to press the mic button again to continue with the dictation.

I narrowed down the problem to the RNMarkdownTextInput component. The usage of MarkdownTextInput from '@expensify/react-native-live-markdown' is what introduced this behavior. I will continue my testing tomorrow

[diegohosilver]

Proposal

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

Android dictation cuts off in Chrome web

What is the root cause of that problem?

The package @expensify/react-native-live-markdown is causing this behavior. The code below is causing the dictation to cut off when setting targetElement.innerHTML = ''

 if (!rootSpan || rootSpan.innerHTML !== dom.innerHTML) {
      targetElement.innerHTML = '';
      targetElement.innerText = '';
      target.appendChild(dom);

      if (BrowserUtils.isChromium) {
        moveCursor(isFocused, alwaysMoveCursorToTheEnd, cursorPosition, target);
      }
 }

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

1. Check if the current text is different from the parsed ranges to HTML nodes
2. Clear the targetElement innerHTML by removing child nodes
3. Append the HTML nodes to the targetElement by cloning them

What alternative solutions did you explore? (Optional)

N/A

[eh2077]

@diegohosilver Thanks for your proposal! Can you elaborate on why this issue happens on mobile Chrome only?

[diegohosilver]

@eh2077 no problem!

I'm not 100% sure. I would say it has to do with Android's WebView implementation:

• It might handle contentEditable elements differently than other platforms.
• It might be more sensitive to DOM updates during ongoing input events, causing the dictation to cut off when the DOM is modified.

I'd like to provide an answer on why this is happening, but this is where the rabbit hole led me.

[eh2077]

@diegohosilver Thanks for the comment. But the root cause is still not clear to me.

Looking for better proposals

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[eh2077]

@MitchExpensify Should we consider increasing the bounty to get proposals to dig into the root cause of this issue?

[MitchExpensify]

Early days for a bump, lets give it another week

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.23-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Voice recognition mWeb Android fix #47407

If no regressions arise, payment will be issued on 2024-08-29. 🎊

For reference, here are some details about the assignees on this issue:

• @JKobrynski does not require payment (Contractor)
• @eh2077 requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eh2077] The PR that introduced the bug has been identified. Link to the PR:
• [@eh2077] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eh2077] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eh2077] Determine if we should create a regression test for this bug.
• [@eh2077] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@puneetlath, @JKobrynski, @eh2077 Eep! 4 days overdue now. Issues have feelings too...

[puneetlath]

In the Slack thread it sounds like @quinthar is still experiencing the issue. So going to hold off on paying/closing this just yet.

[Skalakid]

Hello, I'm Michał from SWM. I also reproduced this issue when using Live Markdown. Here I prepared a fix inside the library

[melvin-bot]

@puneetlath, @Skalakid, @JKobrynski, @eh2077 Eep! 4 days overdue now. Issues have feelings too...

[puneetlath]

@Skalakid we're just waiting to upgrade the rn-live-markdown version in the app, is that right?

[Skalakid]

@puneetlath Hi, yes that's the last thing that we have to do. However, I see that there is already #48626 (comment) that is bumping the LM version and it will contain my fixes for this issue. So I wrote the comment under the PR to include test steps for QAs

[puneetlath]

Sounds good!

[melvin-bot]

@puneetlath, @Skalakid, @JKobrynski, @eh2077 Eep! 4 days overdue now. Issues have feelings too...

[puneetlath]

This is on prod. Messaged @quinthar in the Slack thread to have him confirm it's working for him now.

[puneetlath]

Ok looks like we're good to go here. @eh2077 were you involved in this one at all? Or am I good to close this?

[eh2077]

@puneetlath I helped review earlier proposals. After it's picked up by agency team, I helped review the first PR here #47407 (comment) but it doesn't fix the issue when the update hits production. Though it was working fine when testing the PR. I haven't checked what caused the back and forth in the live markdown repo.

Given that, should I be eligible for payment on this task? Hmm, whatever the team think is best works for me, thanks!

[puneetlath]

Ok, I think it's fair to pay then.

Payment summary:

• C+ - $250 - @eh2077 - to be paid via NewDot

Thanks everyone!

[eh2077]

Requested in NewDot

[JmillsExpensify]

$250 approved for @eh2077