feat: Add inline editing for tables on desktop (V2) by mohammadjafarinejad · Pull Request #89166 · Expensify/App

mohammadjafarinejad · 2026-04-29T11:11:08Z

This reverts commit 78be79e.

Explanation of Change

This PR reapplies #83127 (inline editing for tables on desktop), which was reverted in #88751, with the original issues fixed and additional improvements.

Fixed Issues

$ #82534
$ #88711
PROPOSAL: #82534 (comment)

Tests

Open the app and navigate to the Search/Expenses table on desktop (wide layout)
Click a date cell on any transaction row — verify a date picker popover appears anchored to the cell
Select a new date — verify the cell updates and the popover closes
Click a merchant cell — verify it becomes an inline text input with the current value pre-filled
Edit the text and click away (blur) — verify the new value is saved and the cell returns to display mode
Repeat steps 4–5 for description and amount cells
Click a category cell — verify the category picker popover appears
Select a category — verify the cell updates and the popover closes
Click a cell on a row where editing is not permitted (e.g. no policy) — verify no edit mode is triggered

Verify that no errors appear in the JS console

Offline tests

Disable network connection
Edit a cell value — verify the optimistic update is reflected immediately in the UI
Re-enable network — verify the value syncs correctly with the backend

QA Steps

Same as tests.

Verify that no errors appear in the JS console

PR Author Checklist

This reverts commit 78be79e. Co-authored-by: Copilot <copilot@github.com>

melvin-bot · 2026-04-29T11:11:15Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

Co-authored-by: Copilot <copilot@github.com>

codecov · 2026-04-29T11:30:01Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/App.tsx	`100.00% <ø> (ø)`
src/CONST/index.ts	`92.30% <ø> (ø)`
src/components/CategoryPicker/index.tsx	`3.44% <ø> (ø)`
src/components/DatePicker/CalendarPicker/index.tsx	`97.14% <100.00%> (+0.02%)`	⬆️
src/components/Modal/BaseModal.tsx	`87.68% <100.00%> (+0.18%)`	⬆️
src/components/MoneyRequestAmountInput.tsx	`74.07% <100.00%> (+0.48%)`	⬆️
src/components/Search/SearchContext.tsx	`50.00% <100.00%> (+0.42%)`	⬆️
...components/Search/SearchList/ListItem/DateCell.tsx	`100.00% <100.00%> (ø)`
src/components/Search/SearchTableHeader.tsx	`50.57% <ø> (ø)`
...omponents/Table/EditableCell/useInlineEditState.ts	`100.00% <100.00%> (ø)`
... and 31 more
... and 9 files with indirect coverage changes

Co-authored-by: Copilot <copilot@github.com>

trjExpensify · 2026-04-30T00:59:11Z

@mohammadjafarinejad when can you have this ready for review?

dubielzyk-expensify · 2026-04-30T03:12:14Z

And let us know when we can adhoc test build 😄

trjExpensify · 2026-04-30T20:30:59Z

Bump @mohammadjafarinejad. Can we get daily updates please to get this back out?

trjExpensify · 2026-05-01T09:21:12Z

Bump again @mohammadjafarinejad. Please provide an update.

mohammadjafarinejad · 2026-05-01T10:22:24Z

@trjExpensify I'll have it ready for review by tomorrow, after I test it to make sure all bugs are fixed.

trjExpensify · 2026-05-01T10:27:27Z

Okay, thank you.

ahmedGaber93 · 2026-05-04T19:07:29Z

@mohammadjafarinejad Thanks for the updates. I’ll review them today.

This PR touches many important and frequently edited files. We should try to get it merged faster; otherwise, you’ll likely need to resolve git conflicts daily and continuously refactor/fix issues caused by new changes.

I think we can handle those in follow-up PRs. Let’s focus on the remaining critical items so we can merge this faster.

#88750 → Likely due to missing Onyx data, needs deeper investigation
#88681 → UX edge case, not blocking
#88659 → Same behavior on production, newly added expense highlights every time any other report is opened

ahmedGaber93 · 2026-05-04T20:46:02Z

Table header (Category) misalignment in MoneyRequestReportTransactionItem.

@mohammadjafarinejad This not related to our PR, it should fix here #89529

ahmedGaber93 · 2026-05-04T21:03:51Z

The amount field is not editable in Spend > Reports (MoneyRequestReportTransactionItem) (likely need to replace AmountCell with TotalCell).

@mohammadjafarinejad, I’m unable to display the Amount column in the table. Are you experiencing the same issue?

Screen.Recording.2026-05-04.at.11.52.18.PM.mov

Could you also please resolve the conflict and merge the main branch? In the last hours, a few false PRs that touched this table have been reverted.

ahmedGaber93 · 2026-05-04T21:51:23Z

+    // Unreported transactions can have empty merchants (allows clearing)
+    const isUnreported = transaction ? isExpenseUnreported(transaction) : false;
+    if (isEmpty && isUnreported) {
+        return true;
+    }
+


I think we also need to allow empty value for IOU because it is not mandatory on IOU.

WDYT if we follow the same validation logic on stepMerchant

App/src/pages/iou/request/step/IOURequestStepMerchant.tsx

Line 75 in 470dab6

const isMerchantRequired = isPolicyExpenseChat(report) || isExpenseRequest(report) || transaction?.participants?.some((participant) => !!participant.isPolicyExpenseChat);

App/src/pages/iou/request/step/IOURequestStepMerchant.tsx

Line 95 in 470dab6

if (isMerchantRequired && !trimmedMerchant) {

I’m not sure why the suggestion above doesn’t work for me when I test it now. If it doesn’t work for you either, we can use this alternative instead.

const isIOU = isIOUReport(transaction?.reportID); if (isEmpty && (isUnreported || isIOU)) {

ahmedGaber93 · 2026-05-04T22:09:52Z

+                    allowFlippingAmount
+                    isNegative={isNegative}


Let’s follow this to avoid allowing fields that don’t support negative amounts.

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Line 490 in ad21bb4

allowFlippingAmount={!isSplitBill && allowNegative}

ahmedGaber93 · 2026-05-05T00:09:21Z

+            if (!policy?.areCategoriesEnabled) {
+                return false;


I think we should also check if the category is missing, so we can remove the selected category even if the category feature is disabled.

if (!policy?.areCategoriesEnabled && isCategoryMissing(transaction?.category)) {

Screen.Recording.2026-05-05.at.2.43.53.AM.mov

ahmedGaber93 · 2026-05-05T04:55:15Z

    forwardedFSClass = CONST.FULLSTORY.CLASS.UNMASK,
    ref,
    shouldDisplayBelowModals = false,
+    shouldEnableBackdropInNarrowPane = false,


shouldEnableBackdropInNarrowPane seems a bit generic. Since this behavior is specific to right-docked modals rendered in narrow layouts, I suggest renaming it to shouldKeepRightDockedBackdropInNarrowPane for better clarity and self-documentation at call sites.

I believe this change is only needed for the BaseModal.tsx component, since it’s a global component, and isn’t needed for the YearPickerModal.tsx and MonthPickerModal.tsx components.

ahmedGaber93 · 2026-05-05T06:04:49Z

+    return (
+        <PressableWithFeedback
+            accessibilityRole={CONST.ROLE.BUTTON}
+            accessibilityLabel="Edit cell"


I believe we should discuss/address accessibility in the follow-up because the search table has many expense rows, and each row has multiple input types.

If we need to support it on the table (this accessibility action should be used to focus the cell and start editing), we should have options like “Edit amount” and “Edit Tag.” Additionally, we might need to create a separate “Edit amount” option for transaction X.

CC @trjExpensify

ahmedGaber93 · 2026-05-05T06:39:33Z

+            return;
+        }
+        hasEndedRef.current = true;
+        onSave?.(localValue);


Should we return early here if the value hasn’t changed to avoid redundant API calls?

if (localValue === value) { setIsEditing(false); return; }

@mohammadjafarinejad We have an edge case with the above suggestion when flipping between negative and positive amounts. The - symbol lives outside the input, so switching to a negative value is not considered a change.

Passing a new allowSavingUnchangedValue param to useInlineEditState for the amount cell fixes this issue.

if (!allowSavingUnchangedValue && localValue === value) { setIsEditing(false); return; }

@ahmedGaber93 We normalize values in MerchantCell and TotalCell before saving, so a plain equality check is not enough. I added an optional equality function to useInlineEditState so each field can compare normalized values.

const getNormalizedValue = (value: string) => (isDescription ? value : value.trim()); const {isEditing, localValue, setLocalValue, startEditing, save, cancelEditing} = useInlineEditState( canEdit, text, (value) => onSave?.(getNormalizedValue(value)), (value, originalValue) => getNormalizedValue(value) === getNormalizedValue(originalValue), );

WDYT about this approach?

ahmedGaber93 · 2026-05-05T06:50:36Z

+    // Unreported transactions can have empty merchants (allows clearing)
+    const isUnreported = transaction ? isExpenseUnreported(transaction) : false;
+    if (isEmpty && isUnreported) {
+        return true;
+    }
+


I’m not sure why the suggestion above doesn’t work for me when I test it now. If it doesn’t work for you either, we can use this alternative instead.

const isIOU = isIOUReport(transaction?.reportID); if (isEmpty && (isUnreported || isIOU)) {

ahmedGaber93 · 2026-05-05T08:42:14Z

+    const [isInverted, setIsInverted] = useState(false);
+    const [adjustedPopoverHeight, setAdjustedPopoverHeight] = useState(popoverHeight);
+
+    const openPopover = () => {


I think the previous version looks more stable. We now have dynamic height, and the issue is still reproducible.

I think it would be better if we keep the previous version and handle this in a follow-up to keep this PR focused.

Current

Screen.Recording.2026-05-05.at.11.37.57.AM.mov

previous version

Screen.Recording.2026-05-05.at.11.28.44.AM.mov

ahmedGaber93 · 2026-05-05T08:51:16Z

+            editContent={
+                <TextInput
+                    ref={handleRef}
+                    accessibilityLabel={isDescription ? 'Description input' : 'Merchant input'}


Could we localize this accessibility label instead of hardcoding English text?

ahmedGaber93 · 2026-05-05T09:43:32Z

@mohammadjafarinejad, I’ve completed my review. Please let me know when it’s ready for review again. Thanks!

ahmedGaber93 · 2026-05-05T09:49:57Z

And let us know when we can adhoc test build 😄

@dubielzyk-expensify @Expensify/design It is ready for review.

We manage to fix those on follow-up if they not blockers

#88750 → Likely due to missing Onyx data, needs deeper investigation
#88681 → UX edge case, not blocking
#88659 → Same behavior on production, newly added expense highlights every time any other report is opened

Inline edit for description on multiline
Handling accessibility if it's required as mentioned here #89166 (comment)

shawnborton · 2026-05-05T12:26:15Z

@puneetlath did you want to review this one too?

puneetlath · 2026-05-05T13:50:30Z

Yes! I'll take a look once @ahmedGaber93's feedback has been addressed.

ahmedGaber93 · 2026-05-05T19:51:22Z

The amount field is not editable in Spend > Reports (MoneyRequestReportTransactionItem) (likely need to replace AmountCell with TotalCell).

@mohammadjafarinejad This looks not related to our PR, Amount field is hidden even when it is selected in the column configuration.

Commenting on the offending PR https://github.com/Expensify/App/pull/86824/changes#r3191023822 that causes the issue since it still on regression period

If you want to force display it for testing, set this value to false and confirm Amount is selected in the columns configuration.

App/src/libs/SearchUIUtils.ts

Line 5218 in b0a9339

[CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: false,

Screen.Recording.2026-05-05.at.10.50.23.PM.mov

ahmedGaber93 · 2026-05-06T00:55:44Z

We have a new update here: #86824 (comment)

Now, we need to have at least one expense with a foreign currency to display the Amount column on the expense report page.

This may cause a UX conflict for inline edit:

The Total column is always visible, but users cannot edit it because it displays the converted amount.
The Amount column is editable, but it only appears when there is at least one expense with a foreign currency.

@trjExpensify WDYT?

Should we exchange them instead?

Display the Amount column by default since it is the editable value.
Display the Total column only when there is at least one expense with a foreign currency.

trjExpensify · 2026-05-06T01:11:09Z

Should we exchange them instead?

Display the Amount column by default since it is the editable value.

Display the Total column only when there is at least one expense with a foreign currency.

This would be contrary to Classic though? Total (convertedAmount) is always visible, Amount is shown when there's foreign expenses.

ahmedGaber93 · 2026-05-06T02:43:34Z

@trjExpensify Ah, I think we have some options for that.

Display both the amount and the total, as was the case two weeks ago.
Make the total editable if there are no foreign expenses since it already has the value of the amount. When expenses with foreign currency are added and the amount column is displayed, make the editable field the amount (this may confuse the user)
Do nothing. The amount will remain hidden (no inline edit for the amount) until there are foreign expenses.

mohammadjafarinejad · 2026-05-06T08:34:40Z

@ahmedGaber93 Ready for re-review.

Reapply "feat: Add inline editing for tables on desktop"

d9ff3bd

This reverts commit 78be79e. Co-authored-by: Copilot <copilot@github.com>

melvin-bot Bot assigned mohammadjafarinejad Apr 29, 2026

mohammadjafarinejad and others added 5 commits April 29, 2026 15:20

fix: Unreported expense row is broken, amount

cee943c

fix: Merchant in distance expense can be edited by inline editing

dee8d7d

Co-authored-by: Copilot <copilot@github.com>

fix: Merchant field accepts (none) merchant

3b19a92

Co-authored-by: Copilot <copilot@github.com>

fix: Negative sign cannot be entered on amount field

c5ebbc2

Co-authored-by: Copilot <copilot@github.com>

refactor: simplify canEditRestricted logic

d80e491

Co-authored-by: Copilot <copilot@github.com>

mohammadjafarinejad and others added 6 commits April 29, 2026 15:32

fix: use original Onyx for complete policy data

9b4bf06

Co-authored-by: Copilot <copilot@github.com>

fix: add isScanning check to transaction edit permissions

37d11ed

fix: use requestAnimationFrame for popover opening

211728a

fix: update merchant editing logic

89a0a0b

Co-authored-by: Copilot <copilot@github.com>

fix: disable category editing when shouldSelectPolicy is true

de01021

Co-authored-by: Copilot <copilot@github.com>

fix: update transaction amount validation to allow zero for IOU reports

aac22b5

Co-authored-by: Copilot <copilot@github.com>

Merge branch 'main' into fix/82534-v2

1739e89

mohammadjafarinejad added 8 commits May 1, 2026 14:48

fix: remove unused variable

637ded6

fix: resolve no-restricted-imports violation

d78f14a

fix: add money request amount validation

8af50c4

fix: add shouldEnableBackdropInNarrowPane props to modals

14df527

fix: prevent row press during inline editing

1a1369a

fix: use completePolicy in getEditParams

0a13da8

fix: check areCategoriesEnabled in transaction edit permission

fba4e59

fix: handle fallback for transactionThreadReport

e788c96

github-actions Bot reviewed May 4, 2026

View reviewed changes

Comment thread src/components/TransactionItemRow/DataCells/TotalCell.tsx

github-actions Bot reviewed May 4, 2026

View reviewed changes

Comment thread src/components/Table/EditableCell/types.ts

github-actions Bot reviewed May 4, 2026

View reviewed changes

Comment thread src/hooks/useTransactionInlineEdit.ts Outdated

github-actions Bot reviewed May 4, 2026

View reviewed changes

Comment thread src/components/TagPicker/TagPickerModal.tsx Outdated

ahmedGaber93 reviewed May 4, 2026

View reviewed changes

ahmedGaber93 reviewed May 5, 2026

View reviewed changes

Merge branch 'main' into fix/82534-v2

ab117cd

ahmedGaber93 mentioned this pull request May 6, 2026

fixed custom report deploy blockers #86824

Merged

53 tasks

mohammadjafarinejad added 7 commits May 6, 2026 11:27

fix: replace adjustedPopoverHeight with fixed height

11b8c55

refactor: rename backdrop prop

d9ed613

refactor: remove unused props and components

6aa2610

fix: update isValidMerchant validation for IOU reports

4b4313c

fix: add equality check and address PR feedback

746d25e

Merge branch 'main' into fix/82534-v2

e91528f

fix: resolve TS error

7b76715

mohammadjafarinejad requested a review from ahmedGaber93 May 6, 2026 08:34

Conversation

mohammadjafarinejad commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Uh oh!

melvin-bot Bot commented Apr 29, 2026

Uh oh!

codecov Bot commented Apr 29, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

trjExpensify commented Apr 30, 2026

Uh oh!

dubielzyk-expensify commented Apr 30, 2026

Uh oh!

trjExpensify commented Apr 30, 2026

Uh oh!

trjExpensify commented May 1, 2026

Uh oh!

mohammadjafarinejad commented May 1, 2026

Uh oh!

trjExpensify commented May 1, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ahmedGaber93 commented May 4, 2026

Uh oh!

ahmedGaber93 commented May 4, 2026

Uh oh!

ahmedGaber93 commented May 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ahmedGaber93 May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Current

previous version

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ahmedGaber93 commented May 5, 2026

Uh oh!

ahmedGaber93 commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shawnborton commented May 5, 2026

Uh oh!

puneetlath commented May 5, 2026

Uh oh!

ahmedGaber93 commented May 5, 2026

mohammadjafarinejad commented Apr 29, 2026 •

edited

Loading

codecov Bot commented Apr 29, 2026 •

edited by github-actions Bot

Loading

ahmedGaber93 May 5, 2026 •

edited

Loading

ahmedGaber93 commented May 5, 2026 •

edited

Loading