[HOLD for payment 2024-06-13] [$250] [Uneven Splits] [Polish] - User profile opens every time the cursor is dragged outside input and released

[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: 1.4.71-0
Reproducible in staging?: Y
Reproducible in production?: N
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. Go to staging.new.expensify.com
2. Go to group chat
3. Go to + > Split expense
4. Enter amount > Next
5. Drag the split amount in the input field from left to outside the input on the right (the cursor touches user row)
6. Release the cursor

Expected Result:

User profile will not open

Actual Result:

User profile opens every time the cursor is dragged outside the input and released

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

Bug6474144_1715107859081.bandicam_2024-05-08_02-46-31-551.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ac128a48bb83d037
• Upwork Job ID: 1788660611102068736
• Last Price Increase: 2024-05-16
• Automatic offers:
• c3024 | Reviewer | 0

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

Triggered auto assignment to @deetergp (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open Staging deploy checklist to see the list of PRs included in this release, then work quickly on the following:

1. If you find which PR caused the issue/bug, you can reassign it to the person responsible for it.
   • If the author is OOO or won’t get online before the daily deploy is due, you are responsible for finding the best fix/path forward. Don’t hesitate to ask for help!
2. Try to reproduce the issue, if the bug is on production, remove the DeployBlocker label but stay assigned to fix it (or find out which PR broke it to get help from the author).
   • You can adjust the urgency of the issue to better represent the gravity of the bug.
   • If the issue is super low priority, feel free to un-assign yourself.
   • Be careful with PHP warnings, sometimes it is more complex than just adding a null coalescing operator as they might be uncovering some bigger bug.
   • If it was a one-off issue that requires no action (for example, Bedrock was down or it is a duplicated issue), you can close it.

Remember rule #2: Never un-assign yourself from a real DeployBlocker unless you are 100% sure someone else is assigned and will take care of it.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

@deetergp 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-split

[marcaaron]

cc @youssef-lr but I think we can remove the blocker on this one. Seems extremely minor.

[melvin-bot]

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

[youssef-lr]

Hm I think it's a bit annoying for sure, but not blocker worthy.

[youssef-lr]

Seems to be triggered from the mouseUp event when the cursor is on the pressable row.

[dragnoir]

Proposal

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

User profile opens every time the cursor is dragged outside input and released

What is the root cause of that problem?

We don't have a way to to manage the state of mouse interactions across components. This is the first time we have an Input inside an interactive component MenuItem

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

I tested shouldInterceptSwipe and it's not working.

We can solve this by using React Context to manage the state of mouse interactions across components.

1. Create a Context

First, we will need to create a new context that will hold the mouse state and provide handlers to set this state.

import React, { createContext, useContext, useState } from 'react';

// Create a context with default values and handlers
const MouseContext = createContext({
    isMouseDownOnInput: false,
    setMouseDown: () => {},
    setMouseUp: () => {}
});

// Context provider component
export const MouseProvider = ({ children }) => {
    const [isMouseDownOnInput, setIsMouseDownOnInput] = useState(false);

    const setMouseDown = () => setIsMouseDownOnInput(true);
    const setMouseUp = () => setIsMouseDownOnInput(false);

    return (
        <MouseContext.Provider value={{ isMouseDownOnInput, setMouseDown, setMouseUp }}>
            {children}
        </MouseContext.Provider>
    );
};

// Custom hook to use the mouse context
export const useMouseContext = () => useContext(MouseContext);

2. Wrap the Component Tree with the Provider

Wrap the MoneyRequestConfirmationList with the MouseProvider to make the context available to all components that need access to the mouse state.

import { MouseProvider } from './MouseContext';

function App() {
    return (
        <MouseProvider>
            //... rest of the code
        </MouseProvider>
    );
}

3. Use Context in TextInputWithCurrencySymbol

Modify the TextInputWithCurrencySymbol to use the context to set the mouse down and up states.

import { useMouseContext } from './MouseContext';

const {setMouseDown, setMouseUp} = useMouseContext();
    const handleMouseDown = (e: React.MouseEvent<Element, MouseEvent>) => {
        e.stopPropagation();
        // eslint-disable-next-line no-console
        console.log('mouse down on TextInputWithCurrencySymbol');
        setMouseDown();
    };
    const handleMouseUp = (e: React.MouseEvent<Element, MouseEvent>) => {
        e.stopPropagation();
        // eslint-disable-next-line no-console
        console.log('mouse up on TextInputWithCurrencySymbol');
        setMouseUp();
    };

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @youssef-lr is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @dragnoir You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

@youssef-lr, @dragnoir, @muttmuure, @c3024 Huh... This is 4 days overdue. Who can take care of this?

[c3024]

@dragnoir update on PR?

[dragnoir]

@dragnoir update on PR?

will be ready today

[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 1.4.79-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: intercept mouse selection when out of input field #42823

If no regressions arise, payment will be issued on 2024-06-13. 🎊

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

• @dragnoir requires payment (Needs manual offer from BZ)
• @c3024 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:

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

[c3024]

The PR that introduced the bug has been identified. Link to the PR:
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:

This is a new feature and this bug is specific for Web browsers/Desktop. No specific PR can be held responsible for this bug.

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:

This is a specific case of mouse dragging on one element perceived as click in another element. This is an uncommon bug and a discussion on the channel does not appear to be useful.

Determine if we should create a regression test for this bug.
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.

Regression Test Proposal

1. Go to any group chat
2. Click on the + beside the composer > Split expense
3. Enter amount > Next
4. Drag the split amount in the input field from left to outside the input on the right (the cursor touches user row beyond the text input)
5. Release the cursor
6. Verify that the user profile is not opened

[c3024]

@muttmuure this is up for payment. Thanks!

[melvin-bot]

@youssef-lr, @dragnoir, @muttmuure, @c3024 Eep! 4 days overdue now. Issues have feelings too...

[muttmuure]

Paid