[$250] Profile - The default emoji doesn't appear at the profile "Status" settings

[jponikarchuk]

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: v9.3.8-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-3391/folder/13177019/41237786/1146029524?sort=%2Bstatus_id
Email or phone of affected tester (no customers): forexmater+66666@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Android 11/Chrome
App Component: Other

Action Performed:

Preconditions: Create new account;

1. Open Expensify app
2. Tap "Account" tab
3. Tap "Profile"
4. Tap "Status"

Expected Result:

The default emoji should appear in the status drop-down.

Actual Result:

When open "Status" page, observe that the default emoji is missing in the emoji drop-down.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022015915883288501817
• Upwork Job ID: 2015915883288501817
• Last Price Increase: 2026-03-31
• Automatic offers:
• situchan | Contributor | 110954706

Issue Owner

Current Issue Owner: @truph01

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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 Contributor-plus team member for initial proposal review - @Ollyws (External)

[github-actions]

⚠️ @daledah 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.

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.

For new accounts, the default status emoji 💬 does not appear in the Profile Status emoji dropdown. The user cannot see or select the default emoji because the picker starts with no emoji set.

What is the root cause of that problem?

The code assumes that either a draft emoji or a current user emoji always exists. When both values are empty for a new account, the computed default emoji becomes an empty string. This empty value is then passed to the emoji picker, so the picker has no active emoji and does not show the default.

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

• Update the default emoji calculation to always fall back to the initial emoji.
• Modify the assignment in src/pages/settings/Profile/CustomStatus/StatusPage.tsx.

File: src/pages/settings/Profile/CustomStatus/StatusPage.tsx

// Before
const defaultEmoji = draftEmojiCode || currentUserEmojiCode;

// After
const defaultEmoji = draftEmojiCode || currentUserEmojiCode || initialEmoji;

What alternative solutions did you explore? (Optional)

• Handling the fallback inside the emoji picker components was considered, but it moves responsibility to the wrong layer and increases surface area.

[github-actions]

⚠️ @yatin-italy 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.

[abbasifaizan70]

Proposal

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

When a new account opens the Status page, the default emoji (💬) is missing from the emoji dropdown, even though it should appear as the default selection.

What is the root cause of that problem?

The root cause is in the StatusPage.tsx component where the defaultEmoji calculation does not include a fallback to the initialEmoji when both the draft emoji and current user emoji are empty:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 69 to 73 in 87e6d66

	const draftEmojiCode = draftStatus?.emojiCode;
	const draftText = draftStatus?.text;
	const draftClearAfter = draftStatus?.clearAfter;
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	const defaultEmoji = draftEmojiCode || currentUserEmojiCode;

The issue is that for new accounts:

1. draftEmojiCode is undefined (no draft status exists)
2. currentUserEmojiCode is an empty string '' (no status has been set)
3. The expression draftEmojiCode || currentUserEmojiCode evaluates to an empty string ''
4. This empty string is passed as defaultValue to the EmojiPickerButtonDropdown component
5. The emoji picker displays an empty/placeholder state instead of showing the default emoji

The initialEmoji constant exists and is used in the save logic (line 132), but it's not included in the defaultEmoji calculation for display purposes.

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

1. Add initialEmoji as a fallback in the defaultEmoji calculation

Update the defaultEmoji calculation to include initialEmoji as the final fallback, ensuring the default emoji appears in the dropdown for new accounts:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 69 to 73 in 87e6d66

	const draftEmojiCode = draftStatus?.emojiCode;
	const draftText = draftStatus?.text;
	const draftClearAfter = draftStatus?.clearAfter;
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	const defaultEmoji = draftEmojiCode || currentUserEmojiCode;

After:

const draftEmojiCode = draftStatus?.emojiCode;
const draftText = draftStatus?.text;
const draftClearAfter = draftStatus?.clearAfter;
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const defaultEmoji = draftEmojiCode || currentUserEmojiCode || initialEmoji;

Why this fix works:

The updated fallback logic now follows this priority:

1. First: Uses draftEmojiCode if a draft status exists (preserves user's in-progress selection)
2. Second: Falls back to currentUserEmojiCode if the user has an existing saved emoji (preserves user's saved status)
3. Third: Falls back to initialEmoji (💬) for new accounts with no status (shows the default emoji)

How it integrates with existing save logic:

The save logic at line 132 already uses initialEmoji as a fallback:

emojiCode: !emojiCode && statusText ? initialEmoji : emojiCode,

By including initialEmoji in the defaultEmoji calculation, the displayed default emoji now matches what would be saved if the user doesn't explicitly select an emoji, creating a consistent user experience.

What alternative solutions did you explore? (Optional)

Alternative 1: Only show default emoji when there's truly no status

Only show the default emoji when both emoji and text are empty:

const hasNoStatus = !draftEmojiCode && !currentUserEmojiCode && !draftText && !currentUserStatusText;
const defaultEmoji = draftEmojiCode || currentUserEmojiCode || (hasNoStatus ? initialEmoji : '');

Alternative 2: Initialize draft status with default emoji

Set the draft status to include the default emoji when no status exists:

useEffect(() => {
    if (!currentUserEmojiCode && !currentUserStatusText && !draftEmojiCode) {
        updateDraftCustomStatus({emojiCode: initialEmoji, clearAfter: DateUtils.getEndOfToday()});
    }
    // ...
}, []);

Alternative 3: Handle default emoji in the EmojiPickerButtonDropdown component

Add logic in the EmojiPickerButtonDropdown component to show a default emoji when the value is empty.

The chosen solution is the simplest and most direct: add initialEmoji as a fallback in the defaultEmoji calculation. This ensures the default emoji appears in the dropdown for new accounts while preserving all existing behavior for accounts with saved or draft statuses.