Add breathing room when focusing comment composer

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-08 16:41:13 -05:00
parent f44c951a22
commit 2ebbad6561
2 changed files with 5 additions and 0 deletions

View file

@ -293,6 +293,7 @@ describe("IssueChatThread", () => {
it("exposes a composer focus handle that forwards to the editor", () => { it("exposes a composer focus handle that forwards to the editor", () => {
const root = createRoot(container); const root = createRoot(container);
const composerRef = createRef<{ focus: () => void }>(); const composerRef = createRef<{ focus: () => void }>();
const scrollByMock = vi.spyOn(window, "scrollBy").mockImplementation(() => {});
const requestAnimationFrameMock = vi const requestAnimationFrameMock = vi
.spyOn(window, "requestAnimationFrame") .spyOn(window, "requestAnimationFrame")
.mockImplementation((callback: FrameRequestCallback) => { .mockImplementation((callback: FrameRequestCallback) => {
@ -328,7 +329,9 @@ describe("IssueChatThread", () => {
}); });
expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: "smooth", block: "end" }); expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: "smooth", block: "end" });
expect(scrollByMock).toHaveBeenCalledWith({ top: 96, behavior: "smooth" });
expect(markdownEditorFocusMock).toHaveBeenCalledTimes(1); expect(markdownEditorFocusMock).toHaveBeenCalledTimes(1);
scrollByMock.mockRestore();
requestAnimationFrameMock.mockRestore(); requestAnimationFrameMock.mockRestore();
act(() => { act(() => {

View file

@ -219,6 +219,7 @@ interface IssueChatThreadProps {
} }
const DRAFT_DEBOUNCE_MS = 800; const DRAFT_DEBOUNCE_MS = 800;
const COMPOSER_FOCUS_SCROLL_PADDING_PX = 96;
function toIsoString(value: string | Date | null | undefined): string | null { function toIsoString(value: string | Date | null | undefined): string | null {
if (!value) return null; if (!value) return null;
@ -1443,6 +1444,7 @@ const IssueChatComposer = forwardRef<IssueChatComposerHandle, IssueChatComposerP
focus: () => { focus: () => {
composerContainerRef.current?.scrollIntoView({ behavior: "smooth", block: "end" }); composerContainerRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
requestAnimationFrame(() => { requestAnimationFrame(() => {
window.scrollBy({ top: COMPOSER_FOCUS_SCROLL_PADDING_PX, behavior: "smooth" });
editorRef.current?.focus(); editorRef.current?.focus();
}); });
}, },