[WIKI-892] fix: description input component re-render #8600
Conversation
📝 WalkthroughWalkthroughA Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 🧪 Unit Test Generation v2 is now available!We have significantly improved our unit test generation capabilities. To enable: Add this to your reviews:
finishing_touches:
unit_tests:
enabled: trueTry it out by using the Have feedback? Share your thoughts on our Discord thread! 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. Comment |
There was a problem hiding this comment.
Pull request overview
Fixes a bug where the rich-text description editor can show stale content when switching between work items by forcing a remount on work-item change.
Changes:
- Added a
key={issue.id}attribute toDescriptionInputusages in multiple issue detail surfaces to force remount on issue switch. - Updated
DescriptionInput’s prop typing/docs to require akey.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/web/core/components/issues/peek-overview/issue-detail.tsx | Forces DescriptionInput remount when the peeked issue changes. |
| apps/web/core/components/issues/issue-detail/main-content.tsx | Forces DescriptionInput remount when the issue changes in the main detail view. |
| apps/web/core/components/inbox/content/issue-root.tsx | Forces DescriptionInput remount when the inbox issue changes. |
| apps/web/core/components/editor/rich-text/description-input/root.tsx | Updates DescriptionInput props typing/docs to include a required key. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| * @description Key, to ensure the editor is re-rendered when the key changes | ||
| */ | ||
| key: string; | ||
| /** |
There was a problem hiding this comment.
key is a React-reserved attribute and is not delivered to the component via props, so documenting/typing it as a normal required prop is misleading and can cause unnecessary breaking-type changes. Consider removing key from Props (call sites can still pass the JSX key attribute), or rename this to a real prop (e.g., remountKey) and use it internally to set key on the element that should remount.
| * @description Key, to ensure the editor is re-rendered when the key changes | |
| */ | |
| key: string; | |
| /** |
![coderabbitai[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/web/core/components/editor/rich-text/description-input/root.tsx`:
- Around line 63-66: Remove the reserved React "key" property from the Props
interface (the interface named Props in this component) so it is no longer
declared as a prop; update the component's props type accordingly (leave the
component's parameter/destructuring as-is since it already doesn't use key) and
ensure callers continue to use the JSX key attribute (e.g., key={...}) for
reconciliation rather than expecting a "key" prop to be passed.
| /** | ||
| * @description Key, to ensure the editor is re-rendered when the key changes | ||
| */ | ||
| key: string; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Read the file to see the context around lines 63-66
head -n 100 apps/web/core/components/editor/rich-text/description-input/root.tsx | tail -n 50Repository: makeplane/plane
Length of output: 1831
🏁 Script executed:
# Also get more context by reading the full file structure
wc -l apps/web/core/components/editor/rich-text/description-input/root.tsxRepository: makeplane/plane
Length of output: 131
🏁 Script executed:
# Let's search for how this component is used elsewhere
rg "DescriptionInput" --type ts --type tsx -A 2 -B 2 | head -n 50Repository: makeplane/plane
Length of output: 86
🏁 Script executed:
# Search for usages of this component
rg "DescriptionInput" --type ts -A 2 -B 2 | head -n 80Repository: makeplane/plane
Length of output: 5743
🏁 Script executed:
# Read the actual component implementation to see if key is used
cat -n apps/web/core/components/editor/rich-text/description-input/root.tsx | head -n 150Repository: makeplane/plane
Length of output: 5965
🏁 Script executed:
# Continue reading the component to see how props are destructured
cat -n apps/web/core/components/editor/rich-text/description-input/root.tsx | sed -n '100,200p'Repository: makeplane/plane
Length of output: 3879
🏁 Script executed:
# Check the actual call sites to see if they pass a `key` prop
rg "DescriptionInput" -B 3 -A 10 apps/web/core/components/issues/issue-detail/main-content.tsxRepository: makeplane/plane
Length of output: 1374
🌐 Web query:
React key prop special handling component props
💡 Result:
In React, key is special-cased by React: it’s used internally to identify elements during reconciliation, and it is not forwarded to your component as a normal prop—so props.key is undefined. If you need that same value inside the child, pass it again under a different name. [1]
// ✅ key used by React (not readable in child)
items.map(item => (
<Row key={item.id} rowId={item.id} />
));
// Row can read rowId, but NOT props.key
function Row({ rowId }) { /* ... */ }Related: historically ref was also special and not forwarded; starting in React 19, ref can be read as a prop in function components (but not for class components). [1][2]
Sources: React “Special Props Warning” docs [1], React 19 announcement (“ref as a prop”) [2].
Remove key from the Props interface (React reserves it and doesn't pass it to components).
key is a special React attribute handled by the reconciler for element identity and is not passed to component props. The component already demonstrates this by not destructuring key (lines 102–117) despite including it in the type. Including it in the Props interface is misleading—callers may think they're controlling re-renders through a prop when React's JSX key attribute (already used correctly at call sites like key={issue.id}) is what actually drives reconciliation.
🔧 Proposed fix
- /**
- * `@description` Key, to ensure the editor is re-rendered when the key changes
- */
- key: string;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /** | |
| * @description Key, to ensure the editor is re-rendered when the key changes | |
| */ | |
| key: string; |
🤖 Prompt for AI Agents
In `@apps/web/core/components/editor/rich-text/description-input/root.tsx` around
lines 63 - 66, Remove the reserved React "key" property from the Props interface
(the interface named Props in this component) so it is no longer declared as a
prop; update the component's props type accordingly (leave the component's
parameter/destructuring as-is since it already doesn't use key) and ensure
callers continue to use the JSX key attribute (e.g., key={...}) for
reconciliation rather than expecting a "key" prop to be passed.
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
Description
This PR fixes the bug where in some cases while switching between work items, the description does not update.
Solution: A new required prop,
key, is now added to theDescriptionInputcomponent to ensure the component always re-renders on work item change.Type of Change
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.