Skip to content

fix: Move focus to newest item when using "scroll to bottom" button, transitions, and other follow ups to Chat component#10172

Open
LFDanLu wants to merge 9 commits into
mainfrom
ai_thread_testing_followup
Open

fix: Move focus to newest item when using "scroll to bottom" button, transitions, and other follow ups to Chat component#10172
LFDanLu wants to merge 9 commits into
mainfrom
ai_thread_testing_followup

Conversation

@LFDanLu

@LFDanLu LFDanLu commented Jun 9, 2026

Copy link
Copy Markdown
Member

Follow ups to comments in #10045

Fixes the following:

  • strange user message text wrapping the streaming chat story
  • focuses the newest item when using the scroll to bottom button
  • tabbing now takes you out of the chat properly without hitting every toggle button group
  • rename to Chat and Thread from Thread and ThreadList
  • intl, transitions to scroll to bottom button, adding UNSTABLE to the UNSTABLE_focusonEntry, announcing new items if focus is inside the Chat but out side the Thread

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Test the Streaming Chat story, see the fixes above to see what to check

🧢 Your Project:

RSP

LFDanLu added 2 commits June 8, 2026 16:39
used to hit every toggle button group in the thread before exiting
@github-actions github-actions Bot added the v3 label Jun 9, 2026
@rspbot

rspbot commented Jun 9, 2026

Copy link
Copy Markdown

@LFDanLu LFDanLu changed the title fix: (WIP) Move focus to newest item when using "scroll to bottom" button and fix tabbing out of Thread fix: Move focus to newest item when using "scroll to bottom" button, transitions, and other follow ups to Chat component Jun 11, 2026
@rspbot

rspbot commented Jun 11, 2026

Copy link
Copy Markdown

@LFDanLu LFDanLu marked this pull request as ready for review June 11, 2026 18:36
@rspbot

rspbot commented Jun 11, 2026

Copy link
Copy Markdown

yihuiliao
yihuiliao previously approved these changes Jun 12, 2026
@rspbot

rspbot commented Jun 12, 2026

Copy link
Copy Markdown

yihuiliao
yihuiliao previously approved these changes Jun 12, 2026
let isChatFocusWithinRef = useRef(false);
let hasNewMessagesRef = useRef(false);
let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wrong package name?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ugh copy pasta, thanks for the catch. I'll fix the other ones in the rest of the files

[InternalChatContext, {announceItem, setIsNearBottom, setScrollElement}],
[ThreadScrollButtonContext, {isNearBottom, scrollToBottom}],
[
TextFieldContext,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah we'll need to update this to support TokenField too I guess.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep, I can update once your PR goes in. Maybe some kind of generic context could be used to pass this, ideally we'd just need to see if the user is inside what we consider the "field" regardless of what elements those would be

onScroll={handleScroll}
keyboardNavigationBehavior="tab"
focusOnEntry={focusOnEntry}
UNSTABLE_focusonEntry={UNSTABLE_focusonEntry}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the On be capitalized?

@@ -31,21 +32,43 @@ import {
GridListItemProps,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this file supposed to exist still since it is also in Chat.tsx?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants