- add onBlur to handle Serverslist validation

Client/src/Components/Inputs/Search/index.jsx

@@ -12,6 +12,7 @@ import SearchIcon from "../../../assets/icons/search.svg?react";
  * @param {string} props.filteredBy - Key to access the option label from the options
  * @param {string} props.value - Current input value for the Autocomplete
  * @param {Function} props.handleChange - Function to call when the input changes
+ * @param {Function} Prop.onBlur - Function to call when the input is blured
  * @param {Object} props.sx - Additional styles to apply to the component
  * @returns {JSX.Element} The rendered Search component
  */
@@ -55,11 +56,13 @@ const Search = ({
 	error,
 	disabled,
 	startAdornment,
-	endAdornment
+	endAdornment,
+	onBlur
 }) => {
 	const theme = useTheme();
 	return (
 		<Autocomplete
+			onBlur={onBlur}
 			multiple={multiple}
 			id={id}
 			value={value}
@@ -202,7 +205,8 @@ Search.propTypes = {
 	error: PropTypes.string,
 	disabled: PropTypes.bool,
 	startAdornment: PropTypes.object,
-	endAdornment: PropTypes.object
+	endAdornment: PropTypes.object,
+	onBlur: PropTypes.func
 };
 
 export default Search;

Client/src/Components/TabPanels/Status/ContentPanel.jsx

@@ -11,6 +11,8 @@ import { createToast } from "../../../Utils/toastUtils";
 import { networkService } from "../../../main";
 import ServersList from "./ServersList";
 import Checkbox from "../../Inputs/Checkbox";
+import { publicPageSettingsValidation } from "../../../Validation/validation";
+import { buildErrors } from "../../../Validation/error";
 
 /**
  * Content Panel is used to compose the second part of the status page
@@ -76,6 +78,17 @@ const ContentPanel = () => {
 		});
 	};
 
+	const handleServersBlur = () => {
+		const { error } = publicPageSettingsValidation.validate(
+			{ "monitors": form.monitors },
+			{
+				abortEarly: false,
+			}
+		);
+		setErrors((prev) => {
+			return buildErrors(prev, "monitors", error);
+		});
+	};			
 	return (
 		<TabPanel
 			value="Contents"
@@ -144,6 +157,7 @@ const ContentPanel = () => {
 							form={form}
 							setForm={setForm}
 							removeItem={removeCard}
+							onBlur= {handleServersBlur}
 						/>
 
 						{errors["monitors"] && (

Client/src/Components/TabPanels/Status/ServersList/Server/index.jsx

@@ -13,12 +13,13 @@ import PropTypes from "prop-types";
  * @param {*} removeItem The function used to remove a single server
  * @param {*} onChange The Change handler function to handle when the server value is changed
  * used to update the server(monitor) lists* 
+ * @param {*} onBlur Function to call when the input is blured
  * @param {*} dragHandleProps the dragHandleProps passed on to the designated dom node 
  * so that there will be a draging indicator when mouse over it
  * @returns A single server whose value is one of the existing monitors
  */
 
-const Server = ({ id, value, monitors, onChange, removeItem, dragHandleProps }) => {
+const Server = ({ id, value, monitors, onChange, removeItem, onBlur, dragHandleProps }) => {
 	const [search, setSearch] = useState("");
 	const handleSearch = (val) => {
 		setSearch(val);
@@ -32,6 +33,7 @@ const Server = ({ id, value, monitors, onChange, removeItem, dragHandleProps })
 				options={monitors ? monitors : []}
 				filteredBy="name"
 				inputValue={search}
+				onBlur={onBlur}
 				value={value}
 				startAdornment={<ServerStartAdornment dragHandleProps={dragHandleProps} />}
 				endAdornment={
@@ -51,8 +53,9 @@ Server.propTypes = {
 	id: PropTypes.string.isRequired,
 	monitors: PropTypes.array.isRequired,
 	value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-	removeItem: PropTypes.func.isRequired,
+	removeItem: PropTypes.func.isRequired,	
 	onChange: PropTypes.func.isRequired,
+	onBlur: PropTypes.func.isRequired,
 	dragHandleProps: PropTypes.object.isRequired,
 };
 

Client/src/Components/TabPanels/Status/ServersList/index.jsx

@@ -13,11 +13,12 @@ import { Stack, useTheme } from "@mui/material";
  * @param {*} form The Status page form
  * @param {*} setForm Function to set the form
  * @param {*} removeItem The function used to remove a single server
+ * @param {*} onBlur Function to call when the input is blured* 
  * @returns A list of user selected Servers/Monitors
  */
 
 
-const ServersList = ({ monitors, cards, setCards, form, setForm, removeItem }) => {
+const ServersList = ({ monitors, cards, setCards, form, setForm, removeItem, onBlur }) => {
 	const theme = useTheme()
 	const grid = parseInt(theme.spacing(4));
 
@@ -114,6 +115,7 @@ const ServersList = ({ monitors, cards, setCards, form, setForm, removeItem }) =
 											onChange={handleCardChange}
 											removeItem={removeItem}
 											dragHandleProps={provided.dragHandleProps}
+											onBlur={onBlur}
 										/>
 									</Stack>
 								)}
@@ -133,7 +135,8 @@ ServersList.propTypes = {
 	setCards: PropTypes.func.isRequired,
 	form: PropTypes.object.isRequired,
 	setForm: PropTypes.func.isRequired,
-    removeItem: PropTypes.func.isRequired
+    removeItem: PropTypes.func.isRequired,
+	onBlur: PropTypes.func.isRequired
 };
 
 export default ServersList;