added validators to the city dropdown

package.json

@@ -10,6 +10,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/base": "^5.0.0-beta.62",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.16",
     "@mui/x-date-pickers": "^5.0.20",

src/components/app-auto-complete/AppAutoComplete.tsx

@@ -1,13 +1,12 @@
-import { Fragment, SyntheticEvent } from 'react'
-
+import React, { Fragment, SyntheticEvent, useState } from 'react'
 import TextField, { TextFieldProps } from '@mui/material/TextField'
 import Autocomplete, {
   createFilterOptions,
   AutocompleteProps
 } from '@mui/material/Autocomplete'
-
+import { FilterOptionsState } from '@mui/base'
+import { ChipTypeMap } from '@mui/material/Chip'
 import Loader from '~/components/loader/Loader'
-import { ChipTypeMap, FilterOptionsState } from '@mui/material'
 
 const defaultFilterOptions = <T,>(
   options: T[],
@@ -18,10 +17,11 @@ const defaultFilterOptions = <T,>(
 }
 
 type CustomProps<T> = {
-  textFieldProps?: TextFieldProps
+  textFieldProps?: TextFieldProps & { helperText?: string; error?: boolean }
   hideClearIcon?: boolean
   onChange?: (_: SyntheticEvent, value: string | null) => void | Promise<void>
   onFocus?: (_: SyntheticEvent, value: string | null) => void | Promise<void>
+  required?: boolean
 } & Omit<T, 'renderInput'>
 
 const AppAutoComplete = <
@@ -36,17 +36,29 @@ const AppAutoComplete = <
   options = [],
   hideClearIcon = false,
   textFieldProps = {},
+  required = false,
   ...props
 }: CustomProps<
   AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
 >) => {
+  const [error, setError] = useState(false)
+
+  const handleBlur = () => {
+    if (required && !props.value) {
+      setError(true)
+    } else {
+      setError(false)
+    }
+  }
+
   return (
     <Autocomplete
       ListboxProps={ListboxProps}
       filterOptions={filterOptions}
       isOptionEqualToValue={(option, value) => option === value}
       options={options}
       {...props}
+      onBlur={handleBlur}
       renderInput={(params) => (
         <TextField
           {...params}
@@ -63,6 +75,10 @@ const AppAutoComplete = <
               </Fragment>
             )
           }}
+          error={error || textFieldProps.error}
+          helperText={
+            (error && 'This field is required') || textFieldProps.helperText
+          }
         />
       )}
     />

src/components/location-selection-inputs/LocationSelectionInputs.tsx

@@ -111,9 +111,11 @@ const LocationSelectionInputs = <
         onChange={onChangeCity}
         onFocus={onFocusCountry}
         options={cities}
+        required
         sx={{ mb: '25px' }}
         textFieldProps={{
-          label: t('common.labels.city')
+          label: t('common.labels.city'),
+          required: !!data.country
         }}
         value={data.city}
       />