diff --git a/editor.planx.uk/src/components/Feedback/index.tsx b/editor.planx.uk/src/components/Feedback/index.tsx index ac58bdd863..f528bbc90f 100644 --- a/editor.planx.uk/src/components/Feedback/index.tsx +++ b/editor.planx.uk/src/components/Feedback/index.tsx @@ -13,14 +13,14 @@ import { getInternalFeedbackMetadata, insertFeedbackMutation, } from "lib/feedback"; +import { useStore } from "pages/FlowEditor/lib/store"; import { BackButton } from "pages/Preview/Questions"; -import React, { useState, useEffect } from "react"; +import React, { useEffect, useRef,useState } from "react"; import { usePrevious } from "react-use"; import FeedbackOption from "ui/public/FeedbackOption"; + import FeedbackForm from "./FeedbackForm"; import FeedbackPhaseBanner from "./FeedbackPhaseBanner"; -import { useStore } from "pages/FlowEditor/lib/store"; - const FeedbackWrapper = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, @@ -98,6 +98,17 @@ const Feedback: React.FC = () => { } }, [breadcrumbs]); + const feedbackComponentRef = useRef(null); + + useEffect(() => { + if (currentFeedbackView !== "banner" && currentFeedbackView !== "thanks") { + feedbackComponentRef.current?.scrollIntoView({ + behavior: "smooth", + block: "start", + }); + } + }, [currentFeedbackView]); + function handleFeedbackViewClick(event: ClickEvents) { switch (event) { case "close": @@ -364,7 +375,11 @@ const Feedback: React.FC = () => { } } - return ; + return ( +
+ +
+ ); }; export default Feedback;