[WEB-6038] fix: work item empty title flicker

[anmolsinghbhatia]

Description

This PR resolves the flickering empty title issue on initial load for the work item.

Type of Change

• Bug fix

Summary by CodeRabbit

• Bug Fixes
  • Improved title input component initialization to correctly use provided values on initial render, ensuring proper state synchronization.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-6038] Title required component shows empty div with flickering red line

This comment was auto-generated by Plane

[coderabbitai]

📝 Walkthrough

Walkthrough

The title input component's internal state now initializes with the provided value prop when available, falling back to an empty string if none is supplied. This adjustment ensures the component starts with the correct initial value.

Changes

Cohort / File(s)	Summary
Title Input Initialization apps/web/core/components/issues/title-input.tsx	Modified initial title state to use the value prop if provided (value || ""), ensuring the component initializes with the correct title when one is supplied.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A tiny hop, a single line,
🐰 The title now starts just fine,
When value arrives with care,
It's there, it's there, everywhere!
No empty strings left to bear! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is largely incomplete. While it identifies the bug and marks the change type correctly, it lacks required sections like test scenarios, screenshots, and references.	Add test scenarios describing how the fix was verified, include before/after screenshots if applicable, and link the related issue (WEB-6038).

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the bug being fixed: an empty title flicker on work item initial load.
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

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-work-item-empty-title-flicker

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[Copilot]

Pull request overview

Fixes a UI flicker where an issue/work item title briefly renders empty on initial load by initializing local state from the incoming value prop.

Changes:

• Initialize title state with the provided value to avoid an initial empty render.

[Copilot]

This introduces derived state from a prop: if value changes after mount (e.g., async load / store hydration), title won’t update and the input can stay stale. Consider syncing title when value changes (e.g., in an effect gated by hasUnsavedChanges.current), or making the input fully controlled by value (and removing local title state) to avoid inconsistencies.

[Copilot]

Prefer nullish coalescing for defaulting optional props: value || \"\" will also fall back for other falsy values. Using value ?? \"\" is a more precise default for null/undefined.