mWeb - Chat - On saving empty brackets everytime, different behavior is shown

[IuliiaHerets]

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: V9. 0.51-1 Reproducible in staging?: Y Reproducible in production?: Y Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Paste the text in compose box - test test
3. Send the message
4. Long press the message and tap edit comment
5. Delete the text in brackets and save the message
6. Again long press the message and tap edit comment
7. Note 300 is shown as text in brackets
8. Again remove the text in brackets and save the message
9. Again long press the message and tap edit comment
10. Now note empty brackets are not shown

Expected Result:

On saving empty brackets everytime, different behavior must not be shown.

Actual Result:

On saving empty brackets everytime, different behavior is shown.

Workaround:

Unknown

Platforms:

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [x] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/ff048afd-ec42-4c92-8a6f-a32b336be7c7

View all open jobs on GitHub

[melvin-bot[bot]]

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

[IuliiaHerets]

@abekkala 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

[truph01]

Proposal

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

On saving empty brackets everytime, different behavior is shown.

What is the root cause of that problem?

The first time we remove the text inside brackets, the img tag doesn't have alt attr, backend returns the img tag with alt, the text after the last / character. The second time we do that, the backend doesn't return any Onyx data so the context inside brackets is empty as we handle it here.

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

We can update the default alt for img tag if it's empty to be consistent with BE behavior

const attrCache = this.getAttributeCache(extras).attrCache;
const extraAttrs = attrCache && attrCache[imgSource];
const source = Str.sanitizeURL(imgSource);
const defaultAlt = source.split('/').at(-1);
return `<img src="${Str.sanitizeURL(imgSource)}"${` alt="${this.escapeAttributeContent(imgAlt || defaultAlt)}"`} ${extraAttrs || ''}/>`;

https://github.com/Expensify/expensify-common/blob/68cd6f9dd489ed45ab6699b203585564ad4cf1c5/lib/ExpensiMark.ts#L291

What alternative solutions did you explore? (Optional)

Or if we want to display them as empty brackets we can return alt as an empty string, and then the backend will not update the default alt for the image tag

const attrCache = this.getAttributeCache(extras).attrCache;
const extraAttrs = attrCache && attrCache[imgSource];
return `<img src="${Str.sanitizeURL(imgSource)}"${` alt="${this.escapeAttributeContent(imgAlt ?? "")}"`} ${extraAttrs || ''}/>`;

https://github.com/Expensify/expensify-common/blob/68cd6f9dd489ed45ab6699b203585564ad4cf1c5/lib/ExpensiMark.ts#L291