[Due for payment 2026-07-16] [CFI] [$250] Tweak inline table editing

[dubielzyk-expensify]

Today, hovering over an editable cell in the Spend table shows an outlined border indicating the field is editable.

CleanShot.2026-06-11.at.13.09.20.mp4

We want to change this so hovering shows an edit icon, and clicking the icon activates editing. Here's a proof of concept:

CleanShot.2026-06-11.at.13.32.33.mp4

This is essence means that you'll be able to click anywhere on the row to open the expense/report and can only click the icon button to edit the field.

Here's a concept PR we whipped up

Specs

Note that for right align fields, the button should appear on the left.

cc @Expensify/design @Expensify/product

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022064975361747125747
• Upwork Job ID: 2064975361747125747
• Last Price Increase: 2026-06-11

Issue Owner

Current Issue Owner: @nyomanjyotisa

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

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

[wildan-m]

Proposal

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

In the Spend table, hovering over an editable cell currently shows an outlined border around the whole cell to indicate it can be edited, and clicking anywhere in that cell starts inline editing. We want to change this so that hovering shows a dedicated edit (pencil) icon button, and only clicking that icon starts editing — leaving the rest of the cell free to bubble the click up to the row so the user can open the expense/report by clicking anywhere else on the row. For right-aligned fields (e.g. the amount), the icon should appear on the left side of the cell instead of the right.

What is the root cause of that problem?

The editable cell wraps its entire display content in a single full-width PressableWithFeedback whose onPress triggers editing and whose hover style draws the outline border. Because the whole cell is the press target, (a) a click anywhere in the cell starts editing rather than opening the report, and (b) the only available hover affordance is the border, not an icon button.

The interactive (default) branch of EditableCell:

App/src/components/TransactionItemRow/EditableCell/EditableCell.tsx

Lines 97 to 112 in 674cd8c

	return (
	<PressableWithFeedback
	accessibilityRole={CONST.ROLE.BUTTON}
	accessibilityLabel="Edit cell"
	sentryLabel={CONST.SENTRY_LABEL.TABLE.EDITABLE_CELL}
	onPress={onStartEditing}
	onFocus={() => setFocusedCellId(cellId)}
	onBlur={() => setFocusedCellId(null)}
	style={styles.editableCell}
	wrapperStyle={styles.w100}
	focusStyle={styles.editableCellFocus}
	hoverStyle={styles.editableCellHover}
	>
	{children}
	</PressableWithFeedback>
	);

The hover-border style it relies on:

App/src/styles/index.ts

Lines 1185 to 1199 in 674cd8c

	editableCell: {
	width: '100%',
	borderWidth: 1,
	borderRadius: variables.componentBorderRadius,
	borderColor: 'transparent',
	padding: 4,
	height: 'auto',
	minHeight: variables.editableCellHeight,
	overflow: 'hidden',
	justifyContent: 'center',
	},
	editableCellHover: {
	borderColor: theme.buttonHoveredBG,
	},

EditableCell also has no notion of the cell's text alignment, so it cannot decide which side to place an icon on. Right-aligned cells like the amount only express alignment locally in their own display content:

App/src/components/TransactionItemRow/DataCells/TotalCell.tsx

Lines 137 to 143 in 674cd8c

	const displayContent = (
	<TextWithTooltip
	shouldShowTooltip={shouldShowTooltip}
	text={amountToDisplay}
	style={[styles.optionDisplayName, styles.justifyContentCenter, styles.flexShrink1, styles.textAlignRight]}
	/>
	);

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

Rework the default (interactive) branch of EditableCell so the cell is no longer one big press target, and editing is triggered only by an on-hover icon button:

1. Replace the full-cell PressableWithFeedback with a plain container View (keeping styles.editableCell) that wraps the children inside a Hoverable. While the cell is hovered, render an absolutely-positioned PressableWithFeedback containing a pencil Icon (the existing Pencil asset, already registered in the icon set). Move the editing trigger — onPress={onStartEditing}, plus the existing onFocus/onBlur cell-focus tracking and the accessibilityLabel/sentryLabel — onto this icon button instead of the whole cell.

2. Because the cell body is now a non-interactive View, a click on the rest of the cell is no longer captured, so it propagates to the row's outer pressable and opens the expense/report — matching the requested behavior. Use pointerEvents="box-none" on the icon's positioning container so only the button itself is interactive while the rest of the cell remains click-through.

3. Add a small set of styles to src/styles/index.ts: an absolutely-positioned container for the icon (anchored to the right edge by default, vertically centered), a round icon-button style with a default background, and an active/hovered background for the button. Drop the now-unused editableCellHover border style for this branch (the border affordance is replaced by the icon).

4. Handle alignment: add an optional prop to EditableCell (e.g. iconPosition defaulting to 'right', or an isRightAligned boolean) that switches the icon container's anchor to the left edge. Pass it as left from the right-aligned consumer (TotalCell), so the pencil appears on the left for the amount column while all other (left-aligned) cells keep it on the right.

5. Leave the other EditableCell branches unchanged: the non-editable/narrow branch, the inline-edit (editContent) branch, the popover-edit branch, and the deferred/!canEdit plain-View branch all keep their current behavior. Only the interactive default branch gains the hover-icon affordance. Keyboard focusability is preserved because the icon button still wires up onFocus/onBlur and the button accessibility role.

This keeps EditableCell stateless and consumer-driven as documented, while changing only how editing is initiated (icon button on hover) and freeing the rest of the cell to act as part of the row's open-report press target.

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/93242-spend-table-edit-icon-hover?expand=1

What alternative solutions did you explore? (Optional)

• Keeping the whole cell pressable but rendering the pencil icon on hover and stopping propagation only for the icon: rejected because the cell's onPress would still intercept clicks meant to open the report, so clicking the cell body would not open the expense/report as required.
• Detecting right-alignment automatically inside EditableCell by inspecting children styles: rejected as brittle; an explicit prop from the consumer (which already knows it renders a right-aligned value) is simpler and more predictable.

[KJ21-ENG]

Proposal

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

Editable cells in the wide Spend table currently use the whole cell as the edit target and show editability with a hover/focus border. The requested behavior is to let the row itself remain the click target for opening the expense/report, while each editable cell exposes a small edit icon on hover and only that icon starts editing. For right-aligned values like amount, the icon should appear on the left side of the cell content.

What is the root cause of that problem?

The table inline-edit affordance is centralized in src/components/TransactionItemRow/EditableCell/EditableCell.tsx. In its default editable state it renders PressableWithFeedback around the full cell, applies styles.editableCellHover/styles.editableCellFocus, and calls onStartEditing from the cell press itself.

That means every editable data cell using this wrapper, including date/category/tag popover cells and merchant/description/amount inline cells, inherits the old full-cell click-to-edit behavior. The row press handling in src/components/Search/SearchList/ListItem/TransactionListItem/index.tsx already has editing-state guards, but the editable cell consumes the click before normal row navigation can be the primary action.

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

Update EditableCell so the non-editing editable state renders display content in a passive container and overlays/renders a compact pencil icon button that becomes visible on hover/focus. The icon button should be the only element wired to onStartEditing; the display area should no longer be a full-cell PressableWithFeedback, allowing row press propagation to keep opening the expense/report.

Implementation details:

• Add a small edit trigger inside EditableCell using the existing lazy Expensify Pencil icon and existing pressable/icon primitives, with accessibilityRole={CONST.ROLE.BUTTON}, a clear edit accessibility label, and the existing editable-cell sentry label.
• Replace the current hover border affordance (styles.editableCellHover) for the non-editing state with styles that reveal/position the icon trigger while keeping the existing editableCellFocus styling for the active edit state.
• Extend EditableCell with an alignment/placement prop, for example editIconPosition="left" | "right", defaulting to right. Pass the left placement from right-aligned amount cells (TotalCell) so the icon appears before the amount, per the spec. Other left-aligned fields can use the default right-side placement.
• Keep the current inline edit and popover edit branches intact so text inputs/date/category/tag pickers still measure from the same anchor and retain their active focus styling once editing starts.
• Ensure the icon press stops row navigation for that click, while clicks outside the icon inside the same row still call the row's existing onSelectRow path.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add/update component tests around the transaction row editable cells to verify:

• Hovering/focusing an editable cell reveals the edit icon instead of applying the hover border as the edit affordance.
• Pressing the row body opens/selects the transaction row and does not start inline editing.
• Pressing the edit icon starts editing for inline fields such as merchant/description/amount.
• Pressing the edit icon opens popover editing for date/category/tag fields.
• The amount cell renders the icon on the left side of the right-aligned amount display.

What alternative solutions did you explore?

I considered changing each individual data cell (MerchantCell, TotalCell, CategoryCell, TagCell, DateCell) to add its own edit icon. That would work visually, but it would duplicate hover, focus, accessibility, and event handling across every editable column. Since the current behavior already comes from the shared EditableCell wrapper, changing that shared wrapper with a small placement prop is lower risk and keeps future editable columns consistent.

[melvin-bot]

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

[github-actions]

⚠️ @KJ21-ENG Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[aswin-s]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.