[Awaiting checklist] [$250] mWeb - Chat - Keyboard is not dismissed when pasting an image on compose box

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.7-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4724379
Email or phone of affected tester (no customers): vdargentotest+mweb071524@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

Pre-requisite: copy an image from the phone gallery

1. Go to any chat
2. Tap on the compose box for the keyboard to be displayed
3. Paste the image you copied before

Expected Result:

The image preview page should be completely displayed

Actual Result:

The image preview page is partially displayed and the keyboard is not dismissed

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

Bug6543394_1721092979736.Smge1802_1_.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015f768185460c027a
• Upwork Job ID: 1813533658277249254
• Last Price Increase: 2024-07-17
• Automatic offers:
• Krishna2323 | Contributor | 103215448

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @twisterdotcom (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.

[lanitochka17]

@twisterdotcom FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[Krishna2323]

Proposal

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

mWeb - Chat - Keyboard is not dismissed when pasting an image on compose box

What is the root cause of that problem?

We do not blur the input before we call displayFileInModal.

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

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Line 783 in 1465a92

onPasteFile={displayFileInModal}

                    onPasteFile={(file) => {
                        if (isKeyboardShown) {
                            textInputRef.current?.blur();
                        }
                        displayFileInModal(file);
                    }}

We should also check if the keyboard is already shown or not.

What alternative solutions did you explore? (Optional)

We can blur the input in ReportActionCompose.

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

Line 411 in 1465a92

displayFileInModal={displayFileInModal}

[abzokhattab]

Proposal

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

Keyboard is not dismissed when pasting an image on compose box

What is the root cause of that problem?

chat composer is still focused and not blured when pasting the file content

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

in the handlePaste function inside the composer we should blur the composer focus if the content is an attachment:

App/src/components/Composer/index.tsx

Lines 191 to 212 in 5a2602c

	// If paste contains files, then trigger file management
	if (event.clipboardData?.files.length && event.clipboardData.files.length > 0) {
	// Prevent the default so we do not post the file name into the text box
	onPasteFile(event.clipboardData.files[0]);
	return true;
	}
	// If paste contains base64 image
	if (clipboardDataHtml?.includes(CONST.IMAGE_BASE64_MATCH)) {
	const domparser = new DOMParser();
	const pastedHTML = clipboardDataHtml;
	const embeddedImages = domparser.parseFromString(pastedHTML, TEXT_HTML)?.images;
	if (embeddedImages.length > 0 && embeddedImages[0].src) {
	const src = embeddedImages[0].src;
	const file = FileUtils.base64ToFile(src, 'image.png');
	onPasteFile(file);
	return true;
	}
	}
	// If paste contains image from Google Workspaces ex: Sheets, Docs, Slide, etc

to do that we should add:

                textInput.current?.blur();

here and also here

OR

we can declare a helper function inside the Composer file that would call onPaste and blurs the input at the same time .. this way we will apply the separation of concerns principal since it's not the best practice for other components to modify the textinput

[Krishna2323]

Proposal Updated

• Minor updated in main solution and added alternative

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015f768185460c027a

[melvin-bot]

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

[sobitneupane]

Thanks for the proposal everyone.

Proposal from @Krishna2323 looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @Krishna2323 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Krishna2323]

@sobitneupane, PR ready for review ^

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• fix: mWeb - Chat - Keyboard is not dismissed when pasting an image on compose box. #45985

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

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

• @sobitneupane requires payment through NewDot Manual Requests
• @Krishna2323 requires payment automatic offer (Contributor)

[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:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
• [@sobitneupane] 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:
• [@sobitneupane] 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:
• [@sobitneupane] Determine if we should create a regression test for this bug.
• [@sobitneupane] 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.
• [@twisterdotcom] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[twisterdotcom]

Payment Summary:

• @sobitneupane paid $250 via NewDot Manual Request
• @Krishna2323 paid $250 here (Contributor)

[melvin-bot]

@arosiclair, @twisterdotcom, @sobitneupane, @Krishna2323 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[twisterdotcom]

Bump on this @sobitneupane.

[sobitneupane]

Regression Test Proposal

1. Go to any chat
2. Tap on the compose box.
3. Paste an image in the compose box.
4. Verify that the keyboard is closed (if open) and image is previewed in the Attachment Modal.

Do we agree 👍 or 👎

[sobitneupane]

I could not identify the exact PR which might have caused this issue. The feature was added by this PR.

[garrettmknight]

$250 approved for @sobitneupane based on this summary.