[$250] Split - Negative amounts are not deleted

[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.2.71-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: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2266/folder/13176791/41237172/1054918436?sort=%2Bidentifier
Email or phone of affected tester (no customers): sustinov@applausemail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Open NewDot app
2. Log in with your HT account
3. Create a WS
4. Go to the WS room
5. Create an expense with a negative amount
6. Go to the expense details
7. Tap More - Split
8. Tap on the split amount
9. Tap the delete button several times on the keyboard and try to delete the numbers

Expected Result:

When deleting numbers in negative amounts, they should be deleted immediately

Actual Result:

Negative amounts are not deleted

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug7019910_1764789025092.Screenrecording_12-03-2025_21-49-16_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021996752126096844819
• Upwork Job ID: 1996752126096844819
• Last Price Increase: 2025-12-12
• Automatic offers:
• tsa321 | Contributor | 109829457

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

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

[melvin-bot]

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

[hasib711]

Proposal

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

When deleting numbers in negative amounts of SplitListItem, they should be deleted immediately

What is the root cause of that problem?

Two issues:
Validation blocking deletion: validateAmount() in NumberWithSymbolForm.tsx was called without the shouldAllowNegative parameter, so negative numbers were rejected during deletion, blocking the update.
Missing deletion logic: The updateValueNumberPad() function didn't handle deleting the negative sign when it's part of the number string (for split items where allowFlippingAmount=false).

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

We have to update code:
Allow negative validation: Check both isNegative prop (for regular requests) and whether the string starts with - (for split items).
Handle negative sign deletion: When deleting at position 0 and the number starts with -, remove the negative sign.

App/src/components/NumberWithSymbolForm.tsx

Lines 201 to 307 in c679abf

	/**
	* Sets the selection and the number accordingly to the number passed to the input
	* @param newNumber - Changed number from user input
	*/
	const setNewNumber = useCallback(
	(newNumber: string) => {
	// Remove spaces from the newNumber number because Safari on iOS adds spaces when pasting a copied number
	// More info: https://github.com/Expensify/App/issues/16974
	const newNumberWithoutSpaces = stripSpacesFromAmount(newNumber);
	const rawFinalNumber = newNumberWithoutSpaces.includes('.') ? stripCommaFromAmount(newNumberWithoutSpaces) : replaceCommasWithPeriod(newNumberWithoutSpaces);
	const finalNumber = handleNegativeAmountFlipping(rawFinalNumber, allowFlippingAmount, toggleNegative);
	// Use a shallow copy of selection to trigger setSelection
	// More info: https://github.com/Expensify/App/issues/16385
	if (!validateAmount(finalNumber, decimals, maxLength)) {
	setSelection((prevSelection) => ({...prevSelection}));
	return;
	}
	willSelectionBeUpdatedManually.current = true;
	let hasSelectionBeenSet = false;
	const strippedNumber = stripCommaFromAmount(finalNumber);
	numberRef.current = strippedNumber;
	setCurrentNumber((prevNumber) => {
	const isForwardDelete = prevNumber.length > strippedNumber.length && forwardDeletePressedRef.current;
	if (!hasSelectionBeenSet) {
	hasSelectionBeenSet = true;
	setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? strippedNumber.length : prevNumber.length, strippedNumber.length));
	willSelectionBeUpdatedManually.current = false;
	}
	return strippedNumber;
	});
	onInputChange?.(strippedNumber);
	},
	[decimals, maxLength, onInputChange, allowFlippingAmount, toggleNegative],
	);
	/**
	* Set a new number number properly formatted, used for the TextInput
	* @param text - Changed text from user input
	*/
	const setFormattedNumber = (text: string) => {
	// Remove spaces from the new number because Safari on iOS adds spaces when pasting a copied number
	// More info: https://github.com/Expensify/App/issues/16974
	const newNumberWithoutSpaces = stripSpacesFromAmount(text);
	const replacedCommasNumber = handleNegativeAmountFlipping(replaceCommasWithPeriod(newNumberWithoutSpaces), allowFlippingAmount, toggleNegative);
	const withLeadingZero = addLeadingZero(replacedCommasNumber);
	if (!validateAmount(withLeadingZero, decimals, maxLength)) {
	setSelection((prevSelection) => ({...prevSelection}));
	return;
	}
	const strippedNumber = stripCommaFromAmount(withLeadingZero);
	const isForwardDelete = currentNumber.length > strippedNumber.length && forwardDeletePressedRef.current;
	setCurrentNumber(strippedNumber);
	setSelection(getNewSelection(selection, isForwardDelete ? strippedNumber.length : currentNumber.length, strippedNumber.length));
	onInputChange?.(strippedNumber);
	};
	// Clears text selection if user visits symbol (currency) selector and comes back
	useEffect(() => {
	if (!isFocused || wasFocused) {
	return;
	}
	clearSelection();
	}, [isFocused, wasFocused, clearSelection]);
	// Modifies the number to match changed decimals.
	useEffect(() => {
	// If the number supports decimals, we can return
	if (validateAmount(currentNumber, decimals, maxLength, allowFlippingAmount)) {
	return;
	}
	// If the number doesn't support decimals, we can strip the decimals
	setNewNumber(stripDecimalsFromAmount(currentNumber));
	// we want to update only when decimals change.
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [decimals]);
	/**
	* Update number with number or Backspace pressed for BigNumberPad.
	* Validate new number with decimal number regex up to 6 digits and 2 decimal digit to enable Next button
	*/
	const updateValueNumberPad = useCallback(
	(key: string) => {
	if (shouldUpdateSelection && !isTextInputFocused(textInput)) {
	textInput.current?.focus();
	}
	// Backspace button is pressed
	if (key === '<' || key === 'Backspace') {
	if (currentNumber.length > 0) {
	const selectionStart = selection.start === selection.end ? selection.start - 1 : selection.start;
	const newNumber = `${currentNumber.substring(0, selectionStart)}${currentNumber.substring(selection.end)}`;
	setNewNumber(addLeadingZero(newNumber));
	}
	return;
	}
	const newNumber = addLeadingZero(`${currentNumber.substring(0, selection.start)}${key}${currentNumber.substring(selection.end)}`);
	setNewNumber(newNumber);
	},
	[currentNumber, selection.start, selection.end, shouldUpdateSelection, setNewNumber],
	);

const setNewNumber = useCallback(
        (newNumber: string) => {
            const newNumberWithoutSpaces = stripSpacesFromAmount(newNumber);
            const rawFinalNumber = newNumberWithoutSpaces.includes('.') ? stripCommaFromAmount(newNumberWithoutSpaces) : replaceCommasWithPeriod(newNumberWithoutSpaces);
            const finalNumber = handleNegativeAmountFlipping(rawFinalNumber, allowFlippingAmount, toggleNegative);
            const shouldAllowNegative = isNegative || finalNumber.startsWith('-');
            if (!validateAmount(finalNumber, decimals, maxLength, shouldAllowNegative)) {
                setSelection((prevSelection) => ({...prevSelection}));
                return;
            }

            willSelectionBeUpdatedManually.current = true;
            let hasSelectionBeenSet = false;
            const strippedNumber = stripCommaFromAmount(finalNumber);
            numberRef.current = strippedNumber;
            setCurrentNumber((prevNumber) => {
                const isForwardDelete = prevNumber.length > strippedNumber.length && forwardDeletePressedRef.current;
                if (!hasSelectionBeenSet) {
                    hasSelectionBeenSet = true;
                    setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? strippedNumber.length : prevNumber.length, strippedNumber.length));
                    willSelectionBeUpdatedManually.current = false;
                }
                return strippedNumber;
            });
            onInputChange?.(strippedNumber);
        },
        [decimals, maxLength, onInputChange, allowFlippingAmount, toggleNegative, isNegative],
    );

    const setFormattedNumber = (text: string) => {
        const newNumberWithoutSpaces = stripSpacesFromAmount(text);
        const replacedCommasNumber = handleNegativeAmountFlipping(replaceCommasWithPeriod(newNumberWithoutSpaces), allowFlippingAmount, toggleNegative);
        const withLeadingZero = addLeadingZero(replacedCommasNumber);
        const shouldAllowNegative = isNegative || withLeadingZero.startsWith('-');
        if (!validateAmount(withLeadingZero, decimals, maxLength, shouldAllowNegative)) {
            setSelection((prevSelection) => ({...prevSelection}));
            return;
        }

        const strippedNumber = stripCommaFromAmount(withLeadingZero);
        const isForwardDelete = currentNumber.length > strippedNumber.length && forwardDeletePressedRef.current;
        setCurrentNumber(strippedNumber);
        setSelection(getNewSelection(selection, isForwardDelete ? strippedNumber.length : currentNumber.length, strippedNumber.length));
        onInputChange?.(strippedNumber);
    };

    useEffect(() => {
        if (!isFocused || wasFocused) {
            return;
        }
        clearSelection();
    }, [isFocused, wasFocused, clearSelection]);

    useEffect(() => {
        const shouldAllowNegative = isNegative || currentNumber.startsWith('-');
        if (validateAmount(currentNumber, decimals, maxLength, shouldAllowNegative)) {
            return;
        }

        setNewNumber(stripDecimalsFromAmount(currentNumber));
    }, [decimals]);

    const updateValueNumberPad = useCallback(
        (key: string) => {
            if (shouldUpdateSelection && !isTextInputFocused(textInput)) {
                textInput.current?.focus();
            }
            if (key === '<' || key === 'Backspace') {
                if (currentNumber.length > 0) {
                    const selectionStart = selection.start === selection.end ? selection.start - 1 : selection.start;
                    const newNumber = `${currentNumber.substring(0, selectionStart)}${currentNumber.substring(selection.end)}`;
                    
                    if (selectionStart === 0 && currentNumber.startsWith('-')) {
                        setNewNumber(currentNumber.substring(1)); // Remove the negative sign
                        return;
                    }
                    if (selectionStart < 0 && isNegative && clearNegative) {
                        clearNegative();
                        return;
                    }
                    
                    setNewNumber(addLeadingZero(newNumber));
                } else if (isNegative && clearNegative) {
                    // If there are no digits left but the amount is negative (allowFlippingAmount=true case)
                    clearNegative();
                }
                return;
            }
            const newNumber = addLeadingZero(`${currentNumber.substring(0, selection.start)}${key}${currentNumber.substring(selection.end)}`);
            setNewNumber(newNumber);
        },
        [currentNumber, selection.start, selection.end, shouldUpdateSelection, setNewNumber, isNegative, clearNegative],
    );

App/src/components/SelectionListWithSections/SplitListItem.tsx

Lines 44 to 46 in c679abf

	const onSplitExpenseAmountChange = (amount: string) => {
	splitItem.onSplitExpenseAmountChange(splitItem.transactionID, Number(amount));
	};

const onSplitExpenseAmountChange = (amount: string) => {
        // Handle empty string to avoid NaN
        if (amount === '' || amount === '-') {
            splitItem.onSplitExpenseAmountChange(splitItem.transactionID, 0);
            return;
        }
        const numericAmount = Number.parseFloat(amount);
        // Avoid NaN or invalid numbers
        if (Number.isNaN(numericAmount) || !Number.isFinite(numericAmount)) {
            return;
        }
        splitItem.onSplitExpenseAmountChange(splitItem.transactionID, numericAmount);
    };

What alternative solutions did you explore? (Optional)

[abbasifaizan70]

Proposal

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

When users try to delete numbers from a negative amount in a split expense input field, the deletion is blocked and numbers cannot be removed.

What is the root cause of that problem?

The issue is in the NumberWithSymbolForm component (App/src/components/NumberWithSymbolForm.tsx). The validateAmount function is called without the shouldAllowNegative parameter, which defaults to false. This causes intermediate negative values during deletion (like -12, -1, or -) to be rejected by validation.

The Problem Flow:

User types: -123
User presses delete → Input becomes: -12
→ validateAmount("-12", decimals, maxLength) is called
→ shouldAllowNegative defaults to false
→ Validation fails (regex doesn't allow negative)
→ setSelection is updated but number doesn't change
→ Deletion is blocked 

Why it happens:

• The validateAmount function in App/src/libs/MoneyRequestUtils.ts accepts a shouldAllowNegative parameter
• When shouldAllowNegative is false, the regex pattern ^\\d{1,${amountMaxLength}}(\\.\\d{0,${decimals}})?$ doesn't allow the - character
• When shouldAllowNegative is true, the regex pattern ^-?\\d{1,${amountMaxLength}}(\\.\\d{0,${decimals}})?$ allows optional - at the start
• The NumberWithSymbolForm component has an isNegative prop but doesn't use it to determine shouldAllowNegative for validation

Locations where validation fails:

• setNewNumber function (line 216)
• setFormattedNumber function (line 251)
• useEffect for decimals (line 274)
• updateValueNumberPad function (line 299)

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

Update the NumberWithSymbolForm component to determine shouldAllowNegative based on the current input value and the isNegative prop, then pass it to all validateAmount and addLeadingZero calls.

File: App/src/components/NumberWithSymbolForm.tsx

1. Update setNewNumber function (lines 205-237)

const finalNumber = handleNegativeAmountFlipping(rawFinalNumber, allowFlippingAmount, toggleNegative);

// Determine if negative amounts should be allowed
// Allow negative if the number contains '-' (even if it's just "-") or if isNegative is true
const shouldAllowNegative = finalNumber.startsWith('-') || isNegative || rawFinalNumber.startsWith('-');

// Use a shallow copy of selection to trigger setSelection
// More info: https://github.com/Expensify/App/issues/16385
if (!validateAmount(finalNumber, decimals, maxLength, shouldAllowNegative)) {
    setSelection((prevSelection) => ({...prevSelection}));
    return;
}

2. Update setFormattedNumber function (lines 243-261)

const replacedCommasNumber = handleNegativeAmountFlipping(replaceCommasWithPeriod(newNumberWithoutSpaces), allowFlippingAmount, toggleNegative);

// Determine if negative amounts should be allowed
// Allow negative if the number contains '-' (even if it's just "-") or if isNegative is true
const shouldAllowNegative = replacedCommasNumber.startsWith('-') || isNegative || newNumberWithoutSpaces.startsWith('-');

const withLeadingZero = addLeadingZero(replacedCommasNumber, shouldAllowNegative);

if (!validateAmount(withLeadingZero, decimals, maxLength, shouldAllowNegative)) {
    setSelection((prevSelection) => ({...prevSelection}));
    return;
}

3. Update useEffect for decimals (lines 272-283)

useEffect(() => {
    // Determine if negative amounts should be allowed
    const shouldAllowNegative = currentNumber.startsWith('-') || isNegative;

    // If the number supports decimals, we can return
    if (validateAmount(currentNumber, decimals, maxLength, shouldAllowNegative)) {
        return;
    }

    // If the number doesn't support decimals, we can strip the decimals
    setNewNumber(stripDecimalsFromAmount(currentNumber));

    // we want to update only when decimals change.
    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, [decimals]);

4. Update updateValueNumberPad function (lines 295-304)

// Backspace button is pressed
if (key === '<' || key === 'Backspace') {
    if (currentNumber.length > 0) {
        const selectionStart = selection.start === selection.end ? selection.start - 1 : selection.start;
        const newNumber = `${currentNumber.substring(0, selectionStart)}${currentNumber.substring(selection.end)}`;
        // Determine if negative amounts should be allowed
        const shouldAllowNegative = newNumber.startsWith('-') || isNegative || currentNumber.startsWith('-');
        setNewNumber(addLeadingZero(newNumber, shouldAllowNegative));
    }
    return;
}
const newNumberString = `${currentNumber.substring(0, selection.start)}${key}${currentNumber.substring(selection.end)}`;
// Determine if negative amounts should be allowed
const shouldAllowNegative = newNumberString.startsWith('-') || isNegative || currentNumber.startsWith('-');
const newNumber = addLeadingZero(newNumberString, shouldAllowNegative);
setNewNumber(newNumber);

5. Update dependency array for setNewNumber callback

[decimals, maxLength, onInputChange, allowFlippingAmount, toggleNegative, isNegative],

Why this works:

1. Context-aware detection: Determines shouldAllowNegative based on the actual input value (checks if number starts with -) or the isNegative prop
2. Handles intermediate states: Allows validation of intermediate negative values like -, -1, -12 during deletion
3. Backward compatible: Doesn't change behavior for positive amounts
4. Uses existing infrastructure: Leverages the existing shouldAllowNegative parameter in validateAmount and addLeadingZero

What alternative solutions did you explore? (Optional)

None

Demo

Screen.Recording.2025-12-06.at.5.32.31.AM.mov

[tsa321]

Proposal

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

Split amount edit text box on negative amount doesn't behave properly

What is the root cause of that problem?

The SplitListItem in the SplitExpensePage use MoneyRequestAmountInput which is same input component used in money request amount page:

App/src/components/SelectionListWithSections/SplitListItem.tsx

Line 173 in 25ac0d8

<MoneyRequestAmountInput

But we don’t handle negative amount input properly because we don’t pass certain properties to MoneyRequestAmountInput.
The TextInput inside MoneyRequestAmountInput is designed to accept only positive numbers. When the user enters a negative value, it displays the negative symbol, but it does not include it in the actual text input box.

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

The necessary properties for MoneyRequestAmountInput to display the negative value are: toggleNegative, clearNegative, isNegative, allowFlippingAmount.

The rough code could be: In the SplitListItem file :

const [isNegativeAmount, setIsNegativeAmount] = useState(splitItem.amount < 0);
const displayedAmount = Math.abs(splitItem.amount);
const onSplitExpenseAmountChange = useCallback((amount: string) => {
    const realAmount = isNegativeAmount ? -1 * Number(amount): Number(amount)
    splitItem.onSplitExpenseAmountChange(splitItem.transactionID, realAmount);
}, [splitItem.onSplitExpenseAmountChange]);

const handleToogleNegative = useCallback(() => {
    setIsNegativeAmount(!isNegativeAmount)
}, [isNegativeAmount])

const handleClearNegative = useCallback(() => {
    setIsNegativeAmount(false)
}, [])

......
<MoneyRequestAmountInput
   .....
   amount={displayedAmount}
    .....
   toggleNegative={handleToogleNegative}
   clearNegative={handleClearNegative}
   isNegative={isNegativeAmount}
   allowFlippingAmount
/>

Result after fixing some stylings:

test_d.mp4

As you can see, the behavior is similar to the Money Request Amount page.

What alternative solutions did you explore? (Optional)

If we want a simpler text input, we could replace MoneyRequestAmountInput with a TextInput that only accepts numbers.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

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