feat: scroll to feedback view on view change (#2716)

editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx

@@ -9,7 +9,7 @@ import {
   getInternalFeedbackMetadata,
   insertFeedbackMutation,
 } from "lib/feedback";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import FeedbackOption from "ui/public/FeedbackOption";
 
 import { FeedbackFormInput, UserFeedback } from ".";
@@ -36,6 +36,16 @@ const MoreInfoFeedbackComponent: React.FC = () => {
   const [currentFeedbackView, setCurrentFeedbackView] =
     useState<View>("yes/no");
   const [feedbackOption, setFeedbackOption] = useState<Sentiment | null>(null);
+  const feedbackComponentRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (currentFeedbackView === "input") {
+      feedbackComponentRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  }, [currentFeedbackView]);
 
   const handleFeedbackOptionClick = (event: Sentiment) => {
     switch (event) {
@@ -142,7 +152,11 @@ const MoreInfoFeedbackComponent: React.FC = () => {
     }
   }
 
-  return <MoreInfoFeedbackView />;
+  return (
+    <Box ref={feedbackComponentRef}>
+      <MoreInfoFeedbackView />
+    </Box>
+  );
 };
 
 export default MoreInfoFeedbackComponent;

editor.planx.uk/src/components/Feedback/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "lib/feedback";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { BackButton } from "pages/Preview/Questions";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { usePrevious } from "react-use";
 import FeedbackOption from "ui/public/FeedbackOption";
 
@@ -98,6 +98,27 @@ const Feedback: React.FC = () => {
     }
   }, [breadcrumbs]);
 
+  const feedbackComponentRef = useRef<HTMLDivElement | null>(null);
+
+  const shouldScrollToView = () => {
+    switch (currentFeedbackView) {
+      case "banner":
+      case "thanks":
+        return false;
+      default:
+        return true;
+    }
+  };
+
+  useEffect(() => {
+    if (shouldScrollToView()) {
+      feedbackComponentRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  }, [currentFeedbackView]);
+
   function handleFeedbackViewClick(event: ClickEvents) {
     switch (event) {
       case "close":
@@ -364,7 +385,11 @@ const Feedback: React.FC = () => {
     }
   }
 
-  return <Feedback />;
+  return (
+    <Box ref={feedbackComponentRef}>
+      <Feedback />
+    </Box>
+  );
 };
 
 export default Feedback;