Loads of frontend fixes related to React & MUI

frontend/src/components/DocsGrid.jsx

@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
 import theme from '../theme.jsx';
 import ReactGA from 'react-ga4';
 import {Link} from 'react-router-dom';
+import { removeQuery } from '../components/ScrollToTop.jsx';
 
 import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
 import aa from 'search-insights'
@@ -84,21 +85,22 @@ const DocsGrid = props => {
 	}
 
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
-		useEffect(() => {
-			if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
-				const urlSearchParams = new URLSearchParams(window.location.search)
-				const params = Object.fromEntries(urlSearchParams.entries())
-				const foundQuery = params["q"]
-				if (foundQuery !== null && foundQuery !== undefined) {
-					console.log("Got query: ", foundQuery)
-					refine(foundQuery)
-				}
+		var defaultSearch = ""
+		if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
+			const urlSearchParams = new URLSearchParams(window.location.search)
+			const params = Object.fromEntries(urlSearchParams.entries())
+			const foundQuery = params["q"]
+			if (foundQuery !== null && foundQuery !== undefined) {
+				console.log("Got query: ", foundQuery)
+				refine(foundQuery)
+				defaultSearch = foundQuery
 			}
-		}, [])
+		}
 
 		return (
 		  <form noValidate action="" role="search">
 				<TextField 
+					defaultValue={defaultSearch}
 					fullWidth
 					style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}} 
 					InputProps={{
@@ -116,10 +118,10 @@ const DocsGrid = props => {
 					autoComplete='off'
 					type="search"
 					color="primary"
-					defaultValue={currentRefinement}
 					placeholder="Search our Documentation..."
 					id="shuffle_search_field"
 					onChange={(event) => {
+						removeQuery("q")
 						refine(event.currentTarget.value)
 					}}
 					limit={5}