diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index 2ea8d5ee0..581df8ce3 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/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 ( { }); }; + const handleServersBlur = () => { + const { error } = publicPageSettingsValidation.validate( + { "monitors": form.monitors }, + { + abortEarly: false, + } + ); + setErrors((prev) => { + return buildErrors(prev, "monitors", error); + }); + }; return ( { form={form} setForm={setForm} removeItem={removeCard} + onBlur= {handleServersBlur} /> {errors["monitors"] && ( diff --git a/Client/src/Components/TabPanels/Status/ServersList/Server/index.jsx b/Client/src/Components/TabPanels/Status/ServersList/Server/index.jsx index 574a0873f..26a200495 100644 --- a/Client/src/Components/TabPanels/Status/ServersList/Server/index.jsx +++ b/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={} 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, }; diff --git a/Client/src/Components/TabPanels/Status/ServersList/index.jsx b/Client/src/Components/TabPanels/Status/ServersList/index.jsx index ca05ffa06..4f73a87b4 100644 --- a/Client/src/Components/TabPanels/Status/ServersList/index.jsx +++ b/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} /> )} @@ -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;