mWeb - scan - When long pressing a section in mweb, the selection disappears within seconds

[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.42-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch both mweb and Android
2. Tap on a workspace chat
3. Tap plus icon - scan - upload an image using camera
4. Long press the description field

Expected Result:

When long pressing a section, it must show same behavior in mweb and Android

Actual Result:

When long pressing a section in mweb, the selection disappears within seconds but in Android selection remains

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

Bug6621256_1727800119044.screenrecorder-2024-10-01-19-51-50-644_compress_1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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]

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

[huult]

Edited by proposal-police: This proposal was edited at {current_timestamp}.

Proposal

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

When long pressing a section in mweb, the selection disappears within seconds

What is the root cause of that problem?

The issue described in react-native-web is that a long press triggers a contextmenu event, which ends the press and prevents the intended action from completing. So, when we long press on a description or an item using MenuItemWithTopDescription, this issue occurs on mobile web Android. The long press triggers the contextmenu event, ending the press and preventing the intended action from completing

App/src/components/MenuItem.tsx

Line 572 in a6d812c

<PressableWithSecondaryInteraction

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

To resolve this issue on mobile web, we can use onPressOut to handle the end of a press action.

// .src/components/MenuItem.tsx#L575
- onPressOut={ControlSelection.unblock}
+ onPressOut={(e) => {
+                                    if (Browser.isMobileChrome()) {
+                                        if (shouldCheckActionAllowedOnPress) {
+                                            Session.checkIfActionIsAllowed(onPressAction(e), isAnonymousAction);
+                                        } else {
+                                            onPressAction(e);
+                                        }
+                                   }

+                                    ControlSelection.unblock();
+                                }}

POC

Screen.Recording.2024-10-02.at.13.18.49.mov

[c3024]

Edited by proposal-police: This proposal was edited at 2024-10-02 10:52:11 UTC.

Proposal

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

Long pressing a menu item on Android mobile web causes the pressed state feedback to disappear after a short time when the menu item is pressed.

What is the root cause of that problem?

When no onLongPress handler is attached to a Pressable component, Android Chrome overrides the pressed state and activates the browser's default behavior. In this code:

App/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx

Line 152 in a6d812c

onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined}

the onLongPress handler is passed as undefined when the check !isDisabled && onLongPress evaluates to false, which is the case here.

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

We should pass a no-operation function (noop) in the required cases so that a handler, although noop, is set for onLongPress. By registering this handler, Android Chrome does not override the long press behavior. A similar fix is also discussed here.

We implemented a similar fix directly to the BaseGenericPressable here when we had an issue with long press on emojis. However, the changes to BaseGenericPressable had to be reverted here because we overrode the browser's default behavior in all cases of using this Pressable, and TextInput also uses this Pressable. So, when long pressing on the text input, the browser's default menu of Copy/Paste/Select All, etc., was not displayed when we passed a default noop to the onLongPress.

I think MenuItems do not need the browser's default behavior of long press in any case. So, we can pass a default noop for the long press in the MenuItem component like this:

onSecondaryInteraction = Browser.isMobileChrome() ? () => {} : undefined,

here:

App/src/components/MenuItem.tsx

Line 418 in a6d812c

onSecondaryInteraction,

What alternative solutions did you explore? (Optional)

1. We can just pass the noop for only the MenuItems where we see this behavior, like we do in MoneyRequestView and TripDetailsView, if we find that the long press browser default context menu of Android Chrome is required for some MenuItems.
2. We can pass the default noop for secondary interaction for Android Chrome in the PressableWithSecondaryFeedback because wherever we use this we do not seem to rely on the browser default long press behaviour.

[stephanieelliott]

Long press doesn't have any function in this scenario, so it seems this would not have any actual impact on users. Gonna close as Not a priority