<div className="row form-row mb-5"> {/* Country Col */} <div className="col-md-6"> <label htmlFor="country" className="form-label w-100 country-label" > Country* </label> <Autocomplete disablePortal id="country" defaultValue={userData?.countryName ?? ''} options={countriesList} isOptionEqualToValue={(option: any, value: any) => option.label === value.label} renderInput={(params) => ( <TextField {...params} {...register('countryName', { required: true, })} sx={{ '& .MuiOutlinedInput-root': { '& fieldset': { borderColor: (countryID || !submitAttempted) ? 'grey' : 'red', }, '&:hover fieldset': { borderColor: (countryID || !submitAttempted) ? 'grey' : 'red', }, '&.Mui-focused fieldset': { borderColor: (countryID || !submitAttempted) ? 'grey' : 'red', }, }, }} className="country-input" placeholder="Select Country" /> )} // onchange event handler to set the countryName state onChange={(e: any, newVal: any) => { setCountryID(newVal.countryID); setCountrySelected(true); setCityID(0); // Clear the city ID // Also clear any other city-related states if you have them }} /> </div> {/* City Col */} {countrySelected && ( <div className="col-md-6"> <label htmlFor="city" className="form-label w-100 city-label" > City* </label> <Autocomplete disablePortal id="city" value={cityID ? citiesListBycountry.find((city: { cityID: number; }) => city.cityID === cityID) : null} // Use the cityID state to control the value options={citiesListBycountry} isOptionEqualToValue={(option: any, value: any) => option.label === value.label} renderInput={(params) => ( <TextField {...params} {...register('cityName', { required: true, })} sx={{ '& .MuiOutlinedInput-root': { '& fieldset': { borderColor: (cityID || !submitAttempted) ? 'grey' : 'red', }, '&:hover fieldset': { borderColor: (cityID || !submitAttempted) ? 'grey' : 'red', }, '&.Mui-focused fieldset': { borderColor: (cityID || !submitAttempted) ? 'grey' : 'red', }, }, }} className="city-input" placeholder="Choose City*" /> )} onChange={(e, value: any) => setCityID( value?.cityID, )} /> {/* handle errors */} {/* {formErrors.cityName && ( <span className="error-message">{formErrors.cityName}</span> )} */} </div> )} </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter