From 17e42b5336a31419551296aa4f2a7cd0b6aaabdb Mon Sep 17 00:00:00 2001
From: Luccas Castro <64063580+DevPio@users.noreply.github.com>
Date: Sat, 22 Jun 2024 06:00:43 -0300
Subject: [PATCH] feat: :art: adding close icon to clear field

---
 src/controls/sitePicker/SitePicker.tsx | 31 ++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/controls/sitePicker/SitePicker.tsx b/src/controls/sitePicker/SitePicker.tsx
index 0086dd944..790fe6c45 100644
--- a/src/controls/sitePicker/SitePicker.tsx
+++ b/src/controls/sitePicker/SitePicker.tsx
@@ -30,6 +30,7 @@ import {
   ISite,
   ISitePickerProps,
 } from './ISitePicker';
+import { Icon } from '@fluentui/react';
 
 const styles = mergeStyleSets({
   loadingSpinnerContainer: {
@@ -66,6 +67,10 @@ const styles = mergeStyleSets({
     fontWeight: '300',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
+  },
+  customChevronContainer : {
+    display: 'flex',
+    gap:'10px'
   }
 });
 
@@ -113,6 +118,27 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     setFilteredSites(newFilteredSites);
   }, [allSites]);
 
+  const clearItems = React.useCallback((event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    event.stopPropagation();
+    return setSites([]);
+  },[sites]);
+
+  const CustomChevron = () => {
+    if(sites && sites.length > 0){
+      return (
+        <div className={styles.customChevronContainer} >
+          <Icon iconName="Cancel" onClick={clearItems} />
+          <Icon iconName="ChevronDown" />
+        </div>
+      )
+    }
+    return (
+      <div className={styles.customChevronContainer} >
+          <Icon iconName="ChevronDown" />
+      </div>
+    )
+  }
+
   const onSelectionChange = React.useCallback((e, item: IDropdownOption, index: number) => {
     let newSelectedSites: ISite[] = [];
     if (multiSelect !== false) {
@@ -300,9 +326,10 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
       <Dropdown
         label={label}
         placeholder={placeholder}
+        onRenderCaretDown={CustomChevron}
         options={getOptions()}
-        selectedKey={multiSelect === false && !!sites && !!sites[0] ? sites[0].url : undefined}
-        selectedKeys={multiSelect !== false && !!sites ? sites.map(s => s.url) : undefined}
+        selectedKey={multiSelect === false && !!sites && !!sites[0] ? sites[0].url : []}
+        selectedKeys={multiSelect !== false && !!sites ? sites.map(s => s.url) : []}
         disabled={disabled}
         multiSelect={multiSelect !== false}
         onRenderOption={onRenderOption}