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; diff --git a/editor.planx.uk/src/components/Feedback/index.tsx b/editor.planx.uk/src/components/Feedback/index.tsx index 0ecffc2e0e..e9f5d932d2 100644 --- a/editor.planx.uk/src/components/Feedback/index.tsx +++ b/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(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 ; + return ( + + + + ); }; export default Feedback;