ui-core: add prop to disable default filtering in combo box component

Signed-off-by: SarahBellaha <sarah.bellaha@sncf.fr>

ui-core/src/components/inputs/ComboBox/ComboBox.tsx

@@ -23,6 +23,7 @@ export type ComboBoxProps<T> = InputProps & {
   exactSearch?: boolean;
   value?: string;
   onSelectSuggestion?: (option: T | undefined) => void;
+  disableDefaultFilter?: boolean;
 };
 
 const ComboBox = <T,>({
@@ -35,6 +36,7 @@ const ComboBox = <T,>({
   value,
   small,
   onSelectSuggestion,
+  disableDefaultFilter = false,
   ...inputProps
 }: ComboBoxProps<T>) => {
   const [filteredSuggestions, setFilteredSuggestions] = useState<T[]>([]);
@@ -46,8 +48,13 @@ const ComboBox = <T,>({
   const inputRef = useRef<HTMLInputElement>(null);
 
   const sortedSuggestions = useMemo(
-    () => suggestions.sort((a, b) => getSuggestionLabel(a).localeCompare(getSuggestionLabel(b))),
-    [suggestions, getSuggestionLabel]
+    () =>
+      !disableDefaultFilter
+        ? [...suggestions].sort((a, b) =>
+            getSuggestionLabel(a).localeCompare(getSuggestionLabel(b))
+          )
+        : suggestions,
+    [suggestions, getSuggestionLabel, disableDefaultFilter]
   );
 
   const showSuggestions = isInputFocused && filteredSuggestions.length > 0 && !inputProps.disabled;

ui-core/src/stories/ComboBox.stories.tsx

@@ -9,8 +9,9 @@ type Suggestion = { id: string; label: string };
 
 const suggestions = [
   { id: '1', label: 'Manuel' },
-  { id: '2', label: 'Manuela' },
-  { id: '3', label: 'Manuella' },
+  { id: '2', label: 'Consuela' },
+  { id: '3', label: 'Juan' },
+  { id: '4', label: 'Manolo' },
 ] as Suggestion[];
 
 const meta: Meta<typeof ComboBox> = {
@@ -97,3 +98,11 @@ export const SmallInput: Story = {
     small: true,
   },
 };
+
+export const DisabledDefaultFilter: Story = {
+  args: {
+    label: 'Name',
+    type: 'text',
+    disableDefaultFilter: true,
+  },
+};