Fixed forwardRef issues

components/LandingSection/LandingSection.tsx

@@ -9,7 +9,7 @@ import { Button, ButtonProps } from '../Button/Button';
 
 type Props = {
 	className?: string;
-	handleFocus: any;
+	handleFocus: () => void;
 };
 
 export const LandingSection: React.FC<Props> = ({

components/LinkShortener/LinkShortener.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 
 import { Session } from 'next-auth';
 import Image from 'next/image';
@@ -15,14 +15,12 @@ import { Link } from '.prisma/client';
 type InputProps = {
 	setUserLinks: React.Dispatch<React.SetStateAction<Link[]>>;
 	session: Session;
-	shortenerFocusRef: any;
 };
 
-export const LinkShortener: React.FC<InputProps> = ({
-	setUserLinks,
-	session,
-	shortenerFocusRef,
-}) => {
+const LinkShortener: React.ForwardRefRenderFunction<
+	HTMLInputElement,
+	InputProps
+> = ({ setUserLinks, session }, ref) => {
 	const [sourceLink, setSourceLink] = useState('');
 	const [error, setError] = useState<string | null>(null);
 
@@ -84,7 +82,7 @@ export const LinkShortener: React.FC<InputProps> = ({
 					id="longUrl"
 					name="longUrl"
 					value={sourceLink}
-					ref={shortenerFocusRef}
+					ref={ref}
 					onChange={(e) => {
 						handleInputChange(e.target.value);
 					}}
@@ -200,3 +198,5 @@ const ErrorMessage = styled.p<{ error: string | null }>`
 		width: 100%;
 	}
 `;
+
+export default forwardRef(LinkShortener);

pages/index.tsx

@@ -11,7 +11,7 @@ import { CallToActionBanner } from '../components/CallToActionBanner/CallToActio
 import { FeatureSection } from '../components/FeatureSection/FeatureSection';
 import { Footer } from '../components/Footer/Footer';
 import { LandingSection } from '../components/LandingSection/LandingSection';
-import { LinkShortener } from '../components/LinkShortener/LinkShortener';
+import LinkShortener from '../components/LinkShortener/LinkShortener';
 import { LoginModal } from '../components/LoginModal/LoginModal';
 import { MobileMenu } from '../components/MobileMenu/MobileMenu';
 import { NavBar } from '../components/NavBar/NavBar';
@@ -31,11 +31,12 @@ export default function Home({
 	const [userLinks, setUserLinks] = useState<Link[]>([]);
 	const [showDialog, setShowDialog] = useState(false);
 	const [menuOpen, setMenuOpen] = useState(false);
-	const shortenerFocusRef = useRef<HTMLInputElement>();
+	const focusRef = useRef<HTMLInputElement>(null);
 
 	const handleFocus = () => {
-		if (shortenerFocusRef.current) {
-			shortenerFocusRef.current.focus();
+		if (focusRef.current) {
+			focusRef.current.focus();
+			focusRef.current.scrollIntoView({ block: 'center' });
 		}
 	};
 
@@ -78,7 +79,7 @@ export default function Home({
 				<StyledLandingSection handleFocus={handleFocus} />
 				<StyledMain>
 					<LinkShortener
-						shortenerFocusRef={shortenerFocusRef}
+						ref={focusRef}
 						session={session}
 						setUserLinks={setUserLinks}
 					/>

styles/globalStyles.ts

@@ -5,6 +5,10 @@ export const GlobalStyle = createGlobalStyle`
    v2.0 | 20110126
    License: none (public domain)
 */
+html{
+  scroll-behavior: smooth;
+}
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,