Fixed Mastodon social account field mangling input while typing

[ErisDS]

Fixes #27785

Problem

The Mastodon field in Settings → Social Accounts rewrites the input while you type, making it impossible to enter handles like @username@instance.tld (or federated URLs such as https://fedi.pub/@murat@muratcorlu.com).

Typing @murat@muratcorlu.com character-by-character gets reordered to https://muratcorlu.com/@murat before you finish — the moment you reach @murat@muratcorlu.co, muratcorlu.co already validates as an FQDN, so the field is canonicalized early, the .com is dropped and the cursor jumps.

Root cause

It's not the regex — it's when normalization runs. Every keystroke calls updateSetting, which changes the stored handle and triggers the resync useEffect to overwrite the visible field with the canonical display value.

For prefix-append platforms (Instagram, etc.) the canonical form is prefix + raw tail, so the cursor stays at the end and typing keeps working. But the Mastodon handle form reorders tokens (@user@instance → https://instance/@user), which corrupts in-progress input.

Fix

Keep the user's raw text while the field is focused, and canonicalize once on blur — and only when the value is valid, so invalid input is left as typed with its error rather than reverted.

This is the flow the existing testUrlValidation helper already exercises (fill → blur → expect canonical), so every platform keeps its canonicalized display value once editing finishes.

Tests

• Added an acceptance test that types a Mastodon handle character-by-character and asserts the field is not rewritten mid-typing, then canonicalizes on blur. Confirmed it fails on the unfixed code (field becomes https://muratcorlu.com/@murat) and passes with the fix.
• Added a test that a federated Mastodon URL can be entered without error.
• Updated one existing Instagram test to blur before asserting the canonical value (it previously relied on canonicalize-while-focused).
• All 8 acceptance tests + 13 Mastodon unit tests pass.

🤖 Generated with Claude Code

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7ee3e1e2-7df3-4063-9250-d4140f0e85d2

📥 Commits

Reviewing files that changed from the base of the PR and between dd6f1ba and 6faa59d.

📒 Files selected for processing (2)

• apps/admin-x-settings/src/components/settings/general/social-accounts.tsx
• apps/admin-x-settings/test/acceptance/general/social-accounts.test.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• apps/admin-x-settings/src/components/settings/general/social-accounts.tsx
• apps/admin-x-settings/test/acceptance/general/social-accounts.test.ts

---

Walkthrough

The SocialAccounts component now tracks the focused input via a focusedKey state and prevents the settings-to-UI sync from updating a field while it's focused. A handleSocialBlur clears focusedKey and, if validation (getSocialValidationError) passes, normalizes the value with normalizeSocialInput and writes the normalized displayValue back into urls. Each TextField sets focusedKey on focus and calls handleSocialBlur on blur. Acceptance tests were updated/added to verify no mid-typing rewrites, canonicalization only on blur, and acceptance of federated Mastodon URLs.

Possibly related PRs

• TryGhost/Ghost#27935: Both PRs modify social-accounts.tsx to prevent overwriting user-typed social field values while editing by deferring normalization and syncing.

Suggested reviewers

• 9larsons

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fixed Mastodon social account field mangling input while typing' clearly and specifically describes the main bug being fixed and the primary change in this PR.
Description check	✅ Passed	The description provides comprehensive context about the problem, root cause, solution, and testing, all directly related to the changeset.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #27785 by preventing mid-typing rewriting of the Mastodon field and allowing entry of federated handles/URLs through deferred canonicalization on blur.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the Mastodon input mangling bug: component logic for tracking focus state and deferring canonicalization, and acceptance tests validating the fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/mastodon-social-account-typing

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}