forked from farhoodlabs/paperclip
Add breathing room when focusing comment composer
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -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(() => {
|
||||||
|
|||||||
@@ -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();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user