From 16a20609edd874d6d152d6868c1de4bb7f86588c Mon Sep 17 00:00:00 2001
From: SarahBellaha <sarah.bellaha@sncf.fr>
Date: Wed, 9 Oct 2024 11:32:12 +0200
Subject: [PATCH] ui-core: make clear button appear when a default value is
 provided

Signed-off-by: SarahBellaha <sarah.bellaha@sncf.fr>
---
 ui-core/src/components/inputs/ComboBox/ComboBox.tsx | 6 +++---
 ui-core/src/stories/ComboBox.stories.tsx            | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui-core/src/components/inputs/ComboBox/ComboBox.tsx b/ui-core/src/components/inputs/ComboBox/ComboBox.tsx
index 208d9032..41aaa357 100644
--- a/ui-core/src/components/inputs/ComboBox/ComboBox.tsx
+++ b/ui-core/src/components/inputs/ComboBox/ComboBox.tsx
@@ -33,7 +33,7 @@ const ComboBox = <T,>({
   customLabel,
   numberOfSuggestionsToShow = 5,
   exactSearch = false,
-  value,
+  value = '',
   small,
   onSelectSuggestion,
   disableDefaultFilter = false,
@@ -41,7 +41,7 @@ const ComboBox = <T,>({
 }: ComboBoxProps<T>) => {
   const [filteredSuggestions, setFilteredSuggestions] = useState<T[]>([]);
   const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(-1);
-  const [inputValue, setInputValue] = useState(value || '');
+  const [inputValue, setInputValue] = useState(value);
   const [selectedOption, setSelectedOption] = useState<T | null>(null);
   const [isInputFocused, setIsInputFocused] = useState(false);
 
@@ -84,7 +84,7 @@ const ComboBox = <T,>({
   };
 
   const icons = [
-    ...(selectedOption
+    ...(selectedOption || suggestions.some((suggestion) => getSuggestionLabel(suggestion) === value)
       ? [
           {
             icon: <X size={small ? 'sm' : 'lg'} />,
diff --git a/ui-core/src/stories/ComboBox.stories.tsx b/ui-core/src/stories/ComboBox.stories.tsx
index b7c47c0b..70f70ab2 100644
--- a/ui-core/src/stories/ComboBox.stories.tsx
+++ b/ui-core/src/stories/ComboBox.stories.tsx
@@ -51,7 +51,7 @@ export const WithDefaultValue: Story = {
   args: {
     label: 'Your name',
     type: 'text',
-    value: 'Manuéla',
+    value: 'Manolo',
   },
 };