[HOLD for payment 2024-09-18] Distance rate - Dollar sign moves to left after clicking/tapping it

[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: 9.0.31-5
Reproducible in staging?: Y
Reproducible in production?: N
Issue was found when executing this PR: #47850
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/ and log in
2. Navigate to any workspace and enable distance rates
3. Open Distance rate and select "+ Add rate"
4. Double click/tap the dollar sign

Expected Result:

The dollar sign does not move

Actual Result:

The dollar sign moves to the left and the layout gets broken

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6597955_1725911972491.Recording__762.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

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

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

[daledah]

Proposal

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

The dollar sign moves to the left and the layout gets broken

What is the root cause of that problem?

In FormProvider, we validate input when the input is out of focus:

App/src/components/Form/FormProvider.tsx

Lines 350 to 352 in 327c969

	if (shouldValidateOnBlur && isFocusedRef.current) {
	onValidate(inputValues, !hasServerError);
	}

Since the initial input is empty, clicking anything outside the input field (currency symbol, header text, etc.) will result in validate fails, and the error is shown.

The distance rate form uses BaseTextInputWithCurrencySymbol to render input with currency symbol, and in BaseTextInputWithCurrencySymbol, we separate the currency symbol with the text input:

App/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

Lines 35 to 41 in fc33ac1

	const currencySymbolButton = !hideCurrencySymbol && (
	<CurrencySymbolButton
	currencySymbol={currencySymbol ?? ''}
	onCurrencyButtonPress={onCurrencyButtonPress}
	isCurrencyPressable={isCurrencyPressable}
	/>
	);

App/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

Lines 53 to 54 in fc33ac1

	const amountTextInput = (
	<AmountTextInput

App/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

Lines 71 to 77 in fc33ac1

	return (
	<>
	{currencySymbolButton}
	{amountTextInput}
	{extraSymbol}
	</>
	);

and then put them in a flex: row container with align-items: center and justify-content: center:

App/src/components/AmountForm.tsx

Lines 266 to 271 in fc33ac1

	<View
	id={AMOUNT_VIEW_ID}
	onMouseDown={(event) => focusTextInput(event, [AMOUNT_VIEW_ID])}
	style={[styles.moneyRequestAmountContainer, styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}
	>
	<TextInputWithCurrencySymbol

This breaks the layout if there's an input error.

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

We should hide the error text for the Distance rate page and only show the error message on top of Submit button, similar to submit expense form:

1. Add a new param shouldShowError to BaseTextInput, and default to true

2. Update
   

   App/src/components/TextInput/BaseTextInput/index.tsx

   Line 456 in fc33ac1

   {!!inputHelpText && (

to

{!!inputHelpText && shouldShowError && (

to hide error text when shouldShowError is false

3. Then, add shouldShowError={false} to

App/src/components/TextInputWithCurrencySymbol/BaseTextInputWithCurrencySymbol.tsx

Lines 54 to 67 in fc33ac1

	<AmountTextInput
	formattedAmount={formattedAmount}
	onChangeAmount={setFormattedAmount}
	placeholder={placeholder}
	ref={ref}
	selection={selection}
	onSelectionChange={(event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
	onSelectionChange(event);
	}}
	onKeyPress={onKeyPress}
	style={[styles.pr1, style]}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...rest}
	/>

4. (Optional) We can also set shouldValidateOnBlur to false in here to disable validate check on blur for distance rate form if it's not necessary.

What alternative solutions did you explore? (Optional)

NA