feat: add auto scroll to editor functionality (#671)

* feat: add auto scroll to editor functionality * test: mocked scrollIntoView function in ThreadView test cases
openedx · Feb 27, 2024 · 8fc6665 · 8fc6665
1 parent ddb6c96
commit 8fc6665
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/discussions/common/ActionsDropdown.jsx b/src/discussions/common/ActionsDropdown.jsx
@@ -48,7 +48,8 @@ const ActionsDropdown = ({
     }
   }, [actions, isPostingEnabled]);
 
-  const onClickButton = useCallback(() => {
+  const onClickButton = useCallback((event) => {
+    event.preventDefault();
     setTarget(buttonRef.current);
     open();
   }, [open]);

diff --git a/src/discussions/post-comments/PostCommentsView.test.jsx b/src/discussions/post-comments/PostCommentsView.test.jsx
@@ -212,6 +212,7 @@ describe('ThreadView', () => {
       })];
     });
     axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { isPostingEnabled: true });
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
     await executeThunk(fetchCourseCohorts(courseId), store.dispatch, store.getState);

diff --git a/src/discussions/post-comments/comments/comment/CommentEditor.jsx b/src/discussions/post-comments/comments/comment/CommentEditor.jsx
@@ -1,4 +1,6 @@
-import React, { useCallback, useContext, useRef } from 'react';
+import React, {
+  useCallback, useContext, useEffect, useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 
 import { Formik } from 'formik';
@@ -35,6 +37,7 @@ const CommentEditor = ({
   } = comment;
   const intl = useIntl();
   const editorRef = useRef(null);
+  const formRef = useRef(null);
   const { authenticatedUser } = useContext(AppContext);
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
@@ -88,6 +91,12 @@ const CommentEditor = ({
   // the current comment id, or the current comment parent or the curren thread.
   const editorId = `comment-editor-${id || parentId || threadId}`;
 
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [formRef]);
+
   return (
     <Formik
       initialValues={initialValues}
@@ -103,7 +112,7 @@ const CommentEditor = ({
         handleChange,
         resetForm,
       }) => (
-        <Form onSubmit={handleSubmit} className={formClasses}>
+        <Form onSubmit={handleSubmit} className={formClasses} ref={formRef}>
           {canDisplayEditReason && (
             <Form.Group
               isInvalid={isFormikFieldInvalid('editReasonCode', {