fixup! core: refacto combo box

Author: clarani

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

@@ -76,8 +76,7 @@ const ComboBox = <T,>({
   // behavior
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     onChange?.(e);
-    const newInputValue = e.currentTarget.value;
-    setInputValue(newInputValue);
+    setInputValue(e.currentTarget.value);
   };
 
   const selectSuggestion = (index: number) => {
@@ -128,6 +127,7 @@ const ComboBox = <T,>({
   const clearInput = () => {
     setInputValue('');
     onSelectSuggestion(undefined);
+    resetSuggestions();
     focusInput();
   };
 
@@ -136,7 +136,7 @@ const ComboBox = <T,>({
   const inputIcons = useMemo(
     () => [
       // Conditionally include the clear icon only when input is not empty
-      ...(inputValue !== ''
+      ...(value
         ? [
             {
               icon: <XCircle variant="fill" />,

ui-core/src/components/inputs/ComboBox/useDefaultComboBox.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const normalizeString = (str: string) => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
 
@@ -12,29 +12,49 @@ const defaultFilterSuggestions = <T>(
     return suggestions;
   }
 
-  return suggestions.filter((suggestion) => {
-    const suggestionLabel = normalizeString(getSuggestionLabel(suggestion).toLowerCase());
-    return suggestionLabel.startsWith(input.toLowerCase());
-  });
+  const { startingWithInput, containingInput } = suggestions.reduce<{
+    startingWithInput: T[];
+    containingInput: T[];
+  }>(
+    (acc, suggestion) => {
+      const suggestionLabel = normalizeString(getSuggestionLabel(suggestion).toLowerCase());
+      if (suggestionLabel.startsWith(input)) {
+        acc.startingWithInput.push(suggestion);
+        return acc;
+      }
+      if (suggestionLabel.includes(input)) {
+        acc.containingInput.push(suggestion);
+      }
+      return acc;
+    },
+    {
+      startingWithInput: [],
+      containingInput: [],
+    }
+  );
+
+  return [...startingWithInput, ...containingInput];
 };
 
 const useDefaultComboBox = <T>(suggestions: T[], getSuggestionLabel: (suggestion: T) => string) => {
   const [filteredSuggestions, setFilteredSuggestions] = useState<T[]>(suggestions);
+  const [query, setQuery] = useState('');
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newSuggestions = defaultFilterSuggestions(
-      getSuggestionLabel,
-      suggestions,
-      e.target.value
-    );
-    setFilteredSuggestions(newSuggestions);
+    setQuery(e.target.value);
   };
 
+  useEffect(() => {
+    const newSuggestions = defaultFilterSuggestions(getSuggestionLabel, suggestions, query);
+    setFilteredSuggestions(newSuggestions);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [suggestions, query]);
+
   const resetSuggestions = () => {
     setFilteredSuggestions(suggestions);
   };
 
-  return { filteredSuggestions, onChange, resetSuggestions };
+  return { suggestions: filteredSuggestions, onChange, resetSuggestions };
 };
 
 export default useDefaultComboBox;

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

@@ -32,21 +32,16 @@ const ComboBoxStory = (props: { small?: boolean; disabled?: boolean; readOnly?:
     setValue(suggestion);
   };
 
-  const { filteredSuggestions, onChange, resetSuggestions } = useDefaultComboBox(
-    suggestions,
-    getSuggestionLabel
-  );
+  const comboBoxDefaultProps = useDefaultComboBox(suggestions, getSuggestionLabel);
 
   return (
     <div style={{ maxWidth: '20rem' }}>
       <ComboBox
         id="combo-box-custom"
-        getSuggestionLabel={getSuggestionLabel}
         value={value}
-        suggestions={filteredSuggestions}
-        onChange={onChange}
+        getSuggestionLabel={getSuggestionLabel}
         onSelectSuggestion={onSelectSuggestion}
-        resetSuggestions={resetSuggestions}
+        {...comboBoxDefaultProps}
         {...props}
       />
     </div>
@@ -72,7 +67,6 @@ export const Default: Story = {
   args: {
     label: 'Your name',
     type: 'text',
-    defaultValue: '',
   },
 };
 

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

@@ -8,7 +8,7 @@ import ComboBox from '../components/inputs/ComboBox';
 
 type Suggestion = { id: string; firstname: string; lastname: string };
 
-const suggestions = [
+const suggestions: Suggestion[] = [
   { id: '1', firstname: 'Manuel', lastname: 'Garcia' },
   { id: '2', firstname: 'Consuela', lastname: 'Rodriguez' },
   { id: '3', firstname: 'Juan', lastname: 'Gonzales' },
@@ -21,7 +21,7 @@ const suggestions = [
   { id: '10', firstname: 'Carlos', lastname: 'Martin' },
   { id: '11', firstname: 'Elena', lastname: 'Jimenez' },
   { id: '12', firstname: 'Miguel', lastname: 'Ruiz' },
-] as Suggestion[];
+];
 
 const ComboBoxStory = () => {
   const [value, setValue] = useState<Suggestion>();
@@ -35,7 +35,7 @@ const ComboBoxStory = () => {
   };
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
+    const inputValue = e.target.value.toLowerCase();
     if (!inputValue) {
       setFilteredSuggestions(suggestions);
       return;