[#419] removed duplicate adornment and ugly padding (#428)

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

src/components/Attendees/PeopleSearch.tsx

@@ -273,6 +273,9 @@ export function PeopleSearch({
           onChange(event, mapped);
         }}
         slotProps={customSlotProps}
+        // When render input is custom, the adornments should be handled by the custom component
+        forcePopupIcon={!customRenderInput}
+        disableClearable={!!customRenderInput}
         renderInput={(params) =>
           customRenderInput
             ? customRenderInput(params, query, setQuery)

src/components/Menubar/EventSearchBar.tsx

@@ -312,44 +312,42 @@ export default function SearchBar() {
                     </>
                   ),
                   endAdornment: (
-                    <>
+                    <InputAdornment position="end">
-                      {params.InputProps.endAdornment}
+                      {(query || selectedContacts.length > 0) && (
-                      <InputAdornment position="end">
                         <IconButton
-                          onMouseDown={(e) => e.preventDefault()}
+                          aria-label={t("common.clear")}
                           onClick={() => {
-                            setAnchorEl(containerRef.current);
+                            setQuery("");
-                            handleFilterChange("keywords", query);
+                            setSearch("");
-                            handleFilterChange(
+                            handleFilterChange("keywords", "");
-                              "organizers",
+                            setSelectedContacts([]);
-                              selectedContacts.map((a: User) => ({
-                                cn: a.displayName,
-                                cal_address: a.email || "",
-                                partstat: "NEEDS-ACTION",
-                                rsvp: "FALSE",
-                                role: "REQ-PARTICIPANT",
-                                cutype: "INDIVIDUAL",
-                              }))
-                            );
                           }}
                         >
-                          <TuneIcon />
+                          <HighlightOffIcon />
                         </IconButton>
-                      </InputAdornment>
-                      {query && (
-                        <InputAdornment position="end">
-                          <IconButton
-                            onClick={() => {
-                              setQuery("");
-                              setSearch("");
-                              handleFilterChange("keywords", "");
-                            }}
-                          >
-                            <HighlightOffIcon />
-                          </IconButton>
-                        </InputAdornment>
                       )}
-                    </>
+                      <IconButton
+                        aria-label={t("search.filter.filters")}
+                        onMouseDown={(e) => e.preventDefault()}
+                        onClick={() => {
+                          setAnchorEl(containerRef.current);
+                          handleFilterChange("keywords", query);
+                          handleFilterChange(
+                            "organizers",
+                            selectedContacts.map((a: User) => ({
+                              cn: a.displayName,
+                              cal_address: a.email || "",
+                              partstat: "NEEDS-ACTION",
+                              rsvp: "FALSE",
+                              role: "REQ-PARTICIPANT",
+                              cutype: "INDIVIDUAL",
+                            }))
+                          );
+                        }}
+                      >
+                        <TuneIcon />
+                      </IconButton>
+                    </InputAdornment>
                   ),
                 }}
               />

src/locales/en.json

@@ -39,6 +39,7 @@
   },
   "common": {
     "cancel": "Cancel",
+    "clear": "Clear",
     "ok": "Ok",
     "link_copied": "Link copied!",
     "import_file": "File",
@@ -57,7 +58,8 @@
     "filter": {
       "allCalendar": "All calendars",
       "myCalendar": "My calendars",
-      "sharedCalendars": "Shared calendars"
+      "sharedCalendars": "Shared calendars",
+      "filters": "Filters"
     },
     "keywords": "Keywords*",
     "keywordsPlaceholder": "Enter keywords",

src/locales/fr.json

@@ -39,6 +39,7 @@
   },
   "common": {
     "cancel": "Annuler",
+    "clear": "Effacer",
     "ok": "OK",
     "link_copied": "Lien copié !",
     "import_file": "Fichier",
@@ -57,7 +58,8 @@
     "filter": {
       "allCalendar": "Tous les calendriers",
       "myCalendar": "Mes calendriers",
-      "sharedCalendars": "Calendriers partagés"
+      "sharedCalendars": "Calendriers partagés",
+      "filters": "Filtres"
     },
     "keywords": "Mots-clés*",
     "keywordsPlaceholder": "Saisissez des mots-clés",

src/locales/ru.json

@@ -39,6 +39,7 @@
   },
   "common": {
     "cancel": "Отмена",
+    "clear": "Очистить",
     "ok": "Ок",
     "link_copied": "Ссылка скопирована",
     "import_file": "Файл",
@@ -57,7 +58,8 @@
     "filter": {
       "allCalendar": "Все календари",
       "myCalendar": "Мои календари",
-      "sharedCalendars": "Общие календари"
+      "sharedCalendars": "Общие календари",
+      "filters": "Фильтры"
     },
     "keywords": "Ключевые слова*",
     "keywordsPlaceholder": "Введите ключевые слова",

src/locales/vi.json

@@ -39,6 +39,7 @@
   },
   "common": {
     "cancel": "Hủy",
+    "clear": "Xóa",
     "ok": "OK",
     "link_copied": "Đã sao chép liên kết!",
     "import_file": "Tệp",
@@ -57,7 +58,8 @@
     "filter": {
       "allCalendar": "Tất cả lịch",
       "myCalendar": "Lịch của tôi",
-      "sharedCalendars": "Lịch được chia sẻ"
+      "sharedCalendars": "Lịch được chia sẻ",
+      "filters": "Bộ lọc"
     },
     "keywords": "Từ khóa*",
     "keywordsPlaceholder": "Nhập từ khóa",