From 8fc666500aff01f1f540015f8ee05d25d76efdd4 Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Tue, 27 Feb 2024 13:01:52 +0500
Subject: [PATCH] feat: add auto scroll to editor functionality (#671)

* feat: add auto scroll to editor functionality

* test: mocked scrollIntoView function in ThreadView test cases
---
 src/discussions/common/ActionsDropdown.jsx          |  3 ++-
 .../post-comments/PostCommentsView.test.jsx         |  1 +
 .../comments/comment/CommentEditor.jsx              | 13 +++++++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/discussions/common/ActionsDropdown.jsx b/src/discussions/common/ActionsDropdown.jsx
index 110219d3..1e7e4f8b 100644
--- 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
index 09028821..53946c8b 100644
--- 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
index a2337128..c387147d 100644
--- 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', {