diff --git a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx index cbe22755bd..e365c5ab08 100644 --- a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx +++ b/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("yes/no"); const [feedbackOption, setFeedbackOption] = useState(null); + const feedbackComponentRef = useRef(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 ; + return ( + + + + ); }; export default MoreInfoFeedbackComponent;