🐛 fix: topic renaming input focus issue in context menu

[Innei]

📝 Summary

Fixes the issue where the input field wasn't properly focused when renaming topics through the context menu.

Resolves LOBE-2838

🔍 Changes

• ✨ Created FocusableInput component that ensures input focus using queueMicrotask
• 🔧 Replaced autoFocus prop with proper ref-based focus management
• 🧹 Simplified onBlur handler logic
• 🗑️ Removed duplicate toggleEditing call from handleUpdate

💡 Technical Details

The queueMicrotask approach ensures the focus happens after the Popover has fully rendered and positioned itself, which is necessary for the input to receive focus correctly in the context menu scenario.

✅ Test Plan

• Tested topic renaming via context menu - input now properly focuses
• Verified blur behavior still works correctly
• Confirmed Enter key submission still functions

Summary by Sourcery

Ensure topic rename inputs in the sidebar context menu receive focus reliably and streamline the editing lifecycle handling.

Bug Fixes:

• Fix missing focus on the topic rename input when opened from the context menu.

Enhancements:

• Introduce a reusable FocusableInput wrapper that manages focus via refs instead of relying on the autoFocus prop.
• Simplify topic editing state transitions by centralizing blur and popover open-state handling and removing redundant toggle calls.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
lobehub	Ready	Preview, Comment	Jan 8, 2026 7:02am

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Refactors the topic renaming popover to use a new ref-based FocusableInput component with microtask-scheduled focusing, simplifies blur/update handling, and centralizes the toggleEditing lifecycle around popover open state.

Sequence diagram for topic renaming popover focus and lifecycle

sequenceDiagram
  actor User
  participant TopicItem
  participant Editing
  participant Popover
  participant FocusableInput
  participant EventLoop
  participant ChatStore

  User->>TopicItem: Open context menu and click Rename
  TopicItem->>Editing: set editing true
  Editing->>Popover: render with open true
  Popover->>FocusableInput: render input
  FocusableInput->>EventLoop: queueMicrotask(focusInput)
  EventLoop->>FocusableInput: run focusInput()
  FocusableInput->>FocusableInput: ref.current.input.focus()

  User->>FocusableInput: Type new title
  FocusableInput->>Editing: onChange(newValue)
  Editing->>Editing: setNewTitle(newValue)

  User->>Popover: Close popover or click outside
  Popover->>Editing: onOpenChange(false)
  Editing->>Editing: handleUpdate()
  alt title changed
    Editing->>ChatStore: updateTopicTitle(id, newTitle)
  end
  Editing->>Editing: toggleEditing(false)

Loading

Class diagram for FocusableInput and Editing components

classDiagram
  class FocusableInput {
    +InputProps props
    -InputRef ref
    +useEffectFocusWithQueueMicrotask()
  }

  class Editing {
    +string id
    +string title
    +function toggleEditing(visible)
    -string newTitle
    -boolean editing
    -function setNewTitle(value)
    -function handleUpdate()
  }

  class ChatStore {
    +function updateTopicTitle(id, newTitle)
  }

  class Popover {
    +boolean open
    +function onOpenChange(open)
    +FocusableInput content
  }

  class Input {
    +function focus()
  }

  FocusableInput --> Input : wraps
  Editing --> FocusableInput : renders
  Editing --> Popover : configures
  Editing --> ChatStore : uses
  Popover o--> FocusableInput : content

Loading

File-Level Changes

Change	Details	Files
Introduce a FocusableInput component that reliably focuses the input after the popover finishes rendering.	Create a FocusableInput wrapper around the existing Input component using a ref of type InputRef. Use useEffect with queueMicrotask to focus the underlying input element once the component is mounted. Forward all received props to the underlying Input while attaching the focus ref.	src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Editing.tsx
Switch from autoFocus to explicit ref-based focus management and simplify update/blur handling for topic renaming.	Replace the Input used in the popover content with FocusableInput and remove the autoFocus prop. Simplify the onBlur handler to call handleUpdate only, removing inline logic and duplicate toggleEditing invocation. Rely on Popover onOpenChange to both invoke handleUpdate when closing and call toggleEditing(open), removing the extra toggleEditing(false) call from handleUpdate.	src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Editing.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[gru-agent]

TestGru Assignment

Summary

Link	CommitId	Status	Reason
Detail	6ff461b	🚫 Skipped	No files need to be tested {"src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Editing.tsx":"File path does not match include patterns."}

History Assignment

Tip

You can @gru-agent and leave your feedback. TestGru will make adjustments based on your input

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• In FocusableInput, you’re unconditionally setting ref={ref}, which means any ref passed in via InputProps will be ignored; if you intend this to be reusable, consider using forwardRef and focusing the forwarded ref instead so callers can still access the input ref.
• The handleUpdate callback still lists toggleEditing in its dependency array even though it no longer uses it; you can safely remove that dependency to avoid unnecessary re-creations.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `FocusableInput`, you’re unconditionally setting `ref={ref}`, which means any `ref` passed in via `InputProps` will be ignored; if you intend this to be reusable, consider using `forwardRef` and focusing the forwarded ref instead so callers can still access the input ref.
- The `handleUpdate` callback still lists `toggleEditing` in its dependency array even though it no longer uses it; you can safely remove that dependency to avoid unnecessary re-creations.

## Individual Comments

### Comment 1
<location> `src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Editing.tsx:64-67` </location>
<code_context>
-            handleUpdate();
-            toggleEditing(false);
-          }}
+          onBlur={handleUpdate}
           onChange={(e) => setNewTitle(e.target.value)}
           onClick={(e) => e.stopPropagation()}
</code_context>

<issue_to_address>
**issue (bug_risk):** `handleUpdate` is now invoked from both `onBlur` and `onOpenChange`, which can lead to duplicated updates.

When the input blurs, the popover will likely close and fire `onOpenChange(false)`, causing `handleUpdate` to run twice while `editing` is still `true`. This can result in duplicate `updateTopicTitle` calls for a single edit. To avoid this, either restore `toggleEditing(false)` inside `handleUpdate`, remove the `handleUpdate` call from `onOpenChange` and rely solely on `onBlur`, or make `handleUpdate` idempotent for a given `newTitle` (e.g., by updating local `editing` state or memoizing).
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Copilot]

Pull request overview

This PR fixes an input focus issue when renaming topics through the context menu by implementing a custom FocusableInput component that uses queueMicrotask to ensure focus is applied after the Popover has fully rendered.

• Created FocusableInput component with ref-based focus management using queueMicrotask
• Simplified event handlers by removing duplicate toggleEditing(false) calls
• Cleaned up the onBlur handler to only call handleUpdate

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

toggleEditing is included in the dependency array but is never used within the handleUpdate function. This can be removed from the dependency array to avoid unnecessary re-creation of the callback.

Suggested change

	}, [newTitle, title, id, updateTopicTitle, toggleEditing]);
	}, [newTitle, title, id, updateTopicTitle]);

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6ff461bef2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Close rename popover on blur to avoid stuck editing

In Editing.tsx, onBlur now only runs handleUpdate without closing editing. If the user tabs away or focus is moved programmatically (no outside click), onOpenChange won’t fire and topicRenamingId stays set, leaving the Popover open and the item disabled until a click occurs. This is a regression from the previous blur behavior and is especially noticeable for keyboard users; consider calling toggleEditing(false) on blur or otherwise closing on focus loss.

Useful? React with 👍 / 👎.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.10%. Comparing base (e80b073) to head (cd78f00).
⚠️ Report is 8 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##             next   #11323     +/-   ##
=========================================
  Coverage   76.10%   76.10%             
=========================================
  Files        1128     1128             
  Lines       86332    86332             
  Branches    12138     9784   -2354     
=========================================
  Hits        65699    65699             
  Misses      20557    20557             
  Partials       76       76             

Flag	Coverage Δ
app	70.02% <ø> (ø)
database	94.08% <ø> (ø)
packages/agent-runtime	89.08% <ø> (ø)
packages/context-engine	83.19% <ø> (ø)
packages/conversation-flow	92.41% <ø> (ø)
packages/file-loaders	88.66% <ø> (ø)
packages/memory-user-memory	55.64% <ø> (ø)
packages/model-bank	100.00% <ø> (ø)
packages/model-runtime	86.88% <ø> (ø)
packages/prompts	76.23% <ø> (ø)
packages/python-interpreter	92.90% <ø> (ø)
packages/ssrf-safe-fetch	0.00% <ø> (ø)
packages/utils	92.88% <ø> (ø)
packages/web-crawler	95.62% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
Store	68.45% <ø> (ø)
Services	54.01% <ø> (ø)
Server	73.33% <ø> (ø)
Libs	41.28% <ø> (ø)
Utils	94.40% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[lobehubbot]

❤️ Great PR @Innei ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.

[lobehubbot]

🎉 This PR is included in version 2.0.0-next.238 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀