[#415] added keyword field highligh on empty search (#423)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Menubar/EventSearchBar.tsx

@@ -56,7 +56,7 @@ export default function SearchBar() {
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const filterOpen = Boolean(anchorEl);
-
+  const [filterError, setFilterError] = useState(false);
   const searchWidth = {
     xs: "10vw",
     sm: "20vw",
@@ -142,6 +142,7 @@ export default function SearchBar() {
       attendees: [] as userAttendee[],
     });
     setAnchorEl(null);
+    setFilterError(false);
   };
 
   const handleContactSelect = (_event: any, contacts: User[]) => {
@@ -174,9 +175,11 @@ export default function SearchBar() {
     const cleanedQuery = buildQuery(searchQuery, filters);
     if (cleanedQuery) {
       dispatch(searchEventsAsync(cleanedQuery));
+      dispatch(setView("search"));
+      setAnchorEl(null);
+    } else {
+      filterOpen && setFilterError(true);
     }
-    dispatch(setView("search"));
-    setAnchorEl(null);
   };
 
   useEffect(() => {
@@ -446,11 +449,16 @@ export default function SearchBar() {
                 </InputLabel>
                 <TextField
                   fullWidth
+                  error={filterError}
+                  helperText={filterError ? t("search.error.emptySearch") : ""}
                   placeholder={t("search.keywordsPlaceholder")}
                   value={filters.keywords}
-                  onChange={(e) =>
-                    handleFilterChange("keywords", e.target.value)
-                  }
+                  onChange={(e) => {
+                    handleFilterChange("keywords", e.target.value);
+                    if (e.target.value.trim()) {
+                      setFilterError(false);
+                    }
+                  }}
                   size="small"
                 />
               </Box>
@@ -468,9 +476,12 @@ export default function SearchBar() {
                 </InputLabel>
                 <UserSearch
                   attendees={filters.organizers}
-                  setAttendees={(users: userAttendee[]) =>
-                    handleFilterChange("organizers", users)
-                  }
+                  setAttendees={(users: userAttendee[]) => {
+                    handleFilterChange("organizers", users);
+                    if (users.length > 0) {
+                      setFilterError(false);
+                    }
+                  }}
                 />
               </Box>
 
@@ -487,9 +498,12 @@ export default function SearchBar() {
                 </InputLabel>
                 <UserSearch
                   attendees={filters.attendees}
-                  setAttendees={(users: userAttendee[]) =>
-                    handleFilterChange("attendees", users)
-                  }
+                  setAttendees={(users: userAttendee[]) => {
+                    handleFilterChange("attendees", users);
+                    if (users.length > 0) {
+                      setFilterError(false);
+                    }
+                  }}
                 />
               </Box>
             </Stack>