Fix contact us input focus

src/components/ContactUs/Input.jsx

@@ -2,10 +2,14 @@ import React from 'react'
 //Importing TextField Material Ui element
 import { TextField } from '@material-ui/core';
 
+import { useStyles } from '../AddMissingPersonForm/UseStyles'
+
 //This function is used to create the UI textField based on the assigned prps
 //It is reusable as it can be imported and used at any form 
 
 export default function Input(props) {
+    const classes = useStyles();
+
 //exporting the props recieved 
     const { name, label, value,error=null, onChange,multi } = props;
     //returning the Ui TextField components either as a single or multiline
@@ -16,6 +20,7 @@ export default function Input(props) {
             name={name}
             value={value}
             onChange={onChange}
+            className={classes.textFieldInput}
             {...(error && {error:true,helperText:error})}
             InputLabelProps={{style: {fontSize: 12}}} // font size of input label
             inputProps={{style: {fontSize: 12}}} // font size of input text
@@ -30,6 +35,7 @@ export default function Input(props) {
             rows={4}
             variant="outlined"
             onChange={onChange}
+            className={classes.textFieldInput}
             {...(error && {error:true,helperText:error})}
             InputLabelProps={{style: {fontSize: 12}}} // font size of input label
             inputProps={{style: {fontSize: 12}}} // font size of input text

src/components/ScrollToTop/ScrollToTop.js

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}

src/router/RouterPages.jsx

@@ -11,10 +11,12 @@ import MissingPeople from '../pages/MissingPeople';
 import ContactUs from '../pages/Contactus';
 import PostMissingPerson from '../pages/PostMissingPerson';
 import MissingPerson from '../pages/MissedPerson';
+import ScrollToTop from '../components/ScrollToTop/ScrollToTop'
 
 const RouterPages = () => {
   return (
     <Router>
+      <ScrollToTop/>
       <Navbar />
       <Switch>
         <Route path="/" exact component={Home} />