Fix issues with inputSearch and review recommendation logic

This commit addresses several issues with the inputSearch component and reviews the recommendation logic.

1. Fixed an issue where an option selected in the inputSearch was not marked as selected.
2. Reviewed the recommendation logic to ensure it is necessary and functioning as expected.
3. Fixed an issue where, when `noResultText` was not set and `showResultTextWrittenByUser` was set to true, no text was displayed in the visor when no option matched.

These fixes improve the usability of the inputSearch component and ensure the recommendation logic is effective and necessary.

Author: Hector Arce De Las Heras

src/components/inputSearch/__tests__/helpers.test.tsx

@@ -1,11 +1,4 @@
-import {
-  filterOptions,
-  findBestMatch,
-  getAriaControls,
-  getLength,
-  hasMatchWithOptions,
-} from '../helpers';
-import { InputSearchBestMatch } from '../types/inputSearch';
+import { filterOptions, getAriaControls, getLength, hasMatchWithOptions } from '../helpers';
 
 const optionsToFilter = [
   {
@@ -35,61 +28,44 @@ describe('Input Search Helpers', () => {
     ];
     expect(filterOptions('st', optionsToFilter)).toEqual({
       optionsFiltered: filteredOptions,
-      recomemededOption: undefined,
     });
   });
 
   test('Should filter options without value', async () => {
     expect(filterOptions(undefined, optionsToFilter)).toEqual({ optionsFiltered: optionsToFilter });
   });
 
-  test('Should filter options with no options filtered', async () => {
-    const filteredOptions = {
-      optionsFiltered: [{ options: [] }],
-      recommendedOption: undefined,
-    };
-    expect(filterOptions('ra', optionsToFilter)).toStrictEqual(filteredOptions);
-  });
-
   test('Should get options lenght', async () => {
     expect(getLength(options)).toEqual(4);
   });
 
   test('Should get ariaControls', async () => {
     expect(getAriaControls(options, 'ariaControls')).toStrictEqual('ariaControls0 ariaControls1');
   });
-  test('findBestMatch function should return 1', () => {
-    const objA = { list: 1, bestMatch: { key1: 5 }, bestMatchkey: 'key1' };
-    const objB = { list: 1, bestMatch: { key1: 10 }, bestMatchkey: 'key1' };
 
-    expect(findBestMatch(objA, objB)).toBe(1);
+  test('should return empty array when options is empty', () => {
+    const result = filterOptions('test', []);
+    expect(result.optionsFiltered).toEqual([]);
   });
-  test('findBestMatch function should return -1', async () => {
-    const objA: InputSearchBestMatch = {
-      list: 1,
-      bestMatch: { label: 'label1', value: '2' },
-      bestMatchkey: 'value',
-    };
-    const objB: InputSearchBestMatch = {
-      list: 1,
-      bestMatch: { label: 'label2', value: '1' },
-      bestMatchkey: 'value',
-    };
-    expect(findBestMatch(objA, objB)).toBe(-1);
+
+  test('should return original options when value is undefined', () => {
+    const options = [{ options: ['test1', 'test2'] }];
+    const result = filterOptions(undefined, options);
+    expect(result.optionsFiltered).toEqual(options);
   });
-  test('findBestMatch function should return 0', async () => {
-    const objA: InputSearchBestMatch = {
-      list: 1,
-      bestMatch: { label: 'label1', value: '2' },
-      bestMatchkey: 'value',
-    };
-    const objB: InputSearchBestMatch = {
-      list: 1,
-      bestMatch: { label: 'label2', value: '2' },
-      bestMatchkey: 'value',
-    };
-    expect(findBestMatch(objA, objB)).toBe(0);
+
+  test('should filter options based on value', () => {
+    const options = [{ options: ['test1', 'test2', 'test3'] }];
+    const result = filterOptions('test1', options);
+    expect(result.optionsFiltered).toEqual([{ options: ['test1'] }]);
   });
+
+  test('should return original options when no match is found', () => {
+    const options = [{ options: ['test1', 'test2', 'test3'] }];
+    const result = filterOptions('test4', options);
+    expect(result.optionsFiltered).toEqual(options);
+  });
+
   test('check match', () => {
     const options = ['first', 'second', 'thrid'];
     const correctValue = 'first';

src/components/inputSearch/components/optionsList.tsx

@@ -46,6 +46,7 @@ export const OptionsListComponent = (
       {props.stylesListOption?.optionVariant && props.stylesListOption?.variant && (
         <ListOptions
           ref={sendRef}
+          caseSensitive={props.caseSensitive}
           charsHighlighted={props.searchText?.toString()}
           dataTestId={props.dataTestId}
           hightlightedOptionVariant={props.stylesListOption?.hightlightedOptionVariant}

src/components/inputSearch/components/popoverSearchList.tsx

@@ -30,7 +30,7 @@ export const PopoverSearchListComponent = (
   const useActionBottomSheet = props.styles?.[props.state]?.useActionBottomSheet?.[props.device];
   const labelInResultTextWrittenByUser = useActionBottomSheet
     ? props.inputConfiguration?.value?.toString()
-    : props.recommendedOption?.toString() ?? props.searchText?.toString();
+    : props.searchText?.toString();
   // Behavior with "use this" option
   const showTextWritten: InputSearchOptionType | undefined = useMemo(
     () =>
@@ -63,6 +63,7 @@ export const PopoverSearchListComponent = (
       key={index}
       ref={ref}
       aria-controls={`${props['aria-controls']}${index}`}
+      caseSensitive={props.caseSensitive}
       dataTestId={`${props.dataTestId}OptionsList${index}`}
       hightlightedOption={showTextWritten || showHighlightedOption}
       index={index}

src/components/inputSearch/helpers/filterOptions.ts

@@ -1,4 +1,4 @@
-import { IOptionGroup, InputSearchBestMatch, InputSearchFilterOptionReturnValue } from '../types';
+import { IOptionGroup, InputSearchFilterOptionReturnValue } from '../types';
 
 // eslint-disable-next-line complexity
 export const filterOptions = (
@@ -10,95 +10,43 @@ export const filterOptions = (
   if (options.length === 0) {
     return { optionsFiltered: [] };
   }
-  if (!value) {
+  if (!value || String(value).length < suggestInit) {
     return { optionsFiltered: options };
   }
   const re = new RegExp(wordSeparator);
   // Cloned option list structure
   const optionsFiltered = structuredClone(options);
-  // Array to save the best option from each list
-  const betterMatches: InputSearchBestMatch[] = [];
-  // Array to save the text when it matches
-  const wordCount: string[] = [];
-  // Simply condition
-  const full = true;
 
   for (let i = 0; i < optionsFiltered.length; i++) {
     // Array to save matches options
     const optionsAvailable: string[] = [];
-    // Array to register the index of the matches options
-    const optionsPushed: number[] = [];
-    // Object to record how many times an option is repeated
-    const betterMatchesForlist = {};
     String(value)
       .split(re)
       .map(text =>
         optionsFiltered[i].options.filter(opt => {
           if (text.length && String(opt).toLocaleLowerCase().includes(text.toLocaleLowerCase())) {
-            //Save text when it matches
-            if (!wordCount.includes(text)) {
-              wordCount.push(text);
-            }
-            // Check if the matched option has already been stored
-            const optionPosition = optionsFiltered[i].options.indexOf(opt);
-            if (!optionsPushed.includes(optionPosition)) {
-              // If the option was not registered, it saves its index, registers the option and creates an entry in the object to check if it is repeated in the future
-              optionsPushed.push(optionPosition);
-              optionsAvailable.push(opt);
-              betterMatchesForlist[optionPosition] = 1;
-            } else {
-              // If the option exists, add the match
-              betterMatchesForlist[optionPosition]++;
-            }
+            optionsAvailable.push(opt);
           }
         })
       );
-    // Register the best match from each list, if exists
-    if (Object.keys(betterMatchesForlist).length) {
-      betterMatches.push({
-        list: i,
-        bestMatchkey: findTheHighestKey(betterMatchesForlist),
-        bestMatch: findTheHighestKey(betterMatchesForlist, full),
-      });
-    }
-    // Overwrites the options list with the filtered values
+
     optionsFiltered[i].options = optionsAvailable;
   }
 
-  // Returns the best match from all lists
-  const betterMatch = betterMatches.sort(findBestMatch)[0];
-  // Returns the recommended option, based on the best match
-  const recommendedOption =
-    wordCount.length > suggestInit && betterMatch
-      ? options[betterMatch.list].options[betterMatch.bestMatchkey]
-      : undefined;
-  return { optionsFiltered, recommendedOption };
-};
-
-// Function to return the option with the highest agreement from the list
-function findTheHighestKey(obj: object, full?: boolean) {
-  const highestValue = -Infinity;
-  let highest;
-  for (const [key, value] of Object.entries(obj)) {
-    // Check if the current value is a number and greater than the current highestValue
-    if (typeof value === 'number' && value > highestValue) {
-      highest = full ? { [key]: value } : key;
-    }
-  }
-  return highest;
-}
+  const hasValue = optionsFiltered.some(option => option.options.length > 0);
 
-// Function to reorder (from highest to lowest) the list with the best match
-export function findBestMatch(objA: InputSearchBestMatch, objB: InputSearchBestMatch): number {
-  if (objA.bestMatch?.[objA.bestMatchkey] > objB.bestMatch?.[objB.bestMatchkey]) {
-    return -1;
-  } else if (objA.bestMatch?.[objA.bestMatchkey] < objB.bestMatch?.[objB.bestMatchkey]) {
-    return 1;
-  }
-  return 0;
-}
+  return {
+    optionsFiltered: hasValue ? optionsFiltered : options,
+  };
+};
 
-export const hasMatchWithOptions = (inputValue: string, options: string[]): boolean => {
-  const hasMatch = options.find(option => option === inputValue);
-  return !!hasMatch;
+export const hasMatchWithOptions = (
+  inputValue: string,
+  options: string[],
+  caseSensitive?: boolean
+): boolean => {
+  const hasMatch = caseSensitive
+    ? options.some(option => option === inputValue)
+    : options.some(option => option.toLocaleLowerCase() === inputValue.toLocaleLowerCase());
+  return hasMatch;
 };

src/components/inputSearch/hooks/useInputSearch.ts

@@ -54,6 +54,7 @@ type ParamsType = {
   informationAssociated?: string;
   maxLength?: number;
   searchFilterConfig?: SearchFilterConfig;
+  caseSensitive?: boolean;
   onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
   onIconClick?: React.MouseEventHandler<HTMLButtonElement>;
   executeInternalOpenOptions?: boolean;
@@ -75,7 +76,6 @@ type ReturnType = {
   searchText: string;
   inputPopoverText: string;
   optionsFiltered: IOptionGroup[];
-  recommendedOption: string | undefined;
   handleOpenOptions: (open: boolean) => void;
   handleClickInputSearch: React.MouseEventHandler<HTMLInputElement>;
   handleIconClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -185,7 +185,7 @@ export const useInputSearch = ({
   const handleInputBlur = event => {
     props.onBlur?.(event);
     const allOptions = props.options.map(option => option.options).flat();
-    const hasMatch = hasMatchWithOptions(searchText, allOptions);
+    const hasMatch = hasMatchWithOptions(searchText, allOptions, props.caseSensitive);
     // if the input loses focus and there is no valid option in the input value, show an error message
     if (!hasMatch && !props.hasResultTextWrittenByUser && !props.disableErrorInvalidOption) {
       addInternalError(InternalErrorType.INVALID_OPTION);
@@ -289,7 +289,7 @@ export const useInputSearch = ({
   };
 
   // Filter options
-  const { optionsFiltered, recommendedOption } = filterOptions(
+  const { optionsFiltered } = filterOptions(
     useActionBottomSheet ? inputPopoverText : searchText,
     props.options,
     props.searchFilterConfig?.wordSeparator,
@@ -301,7 +301,6 @@ export const useInputSearch = ({
     searchText,
     inputPopoverText,
     optionsFiltered,
-    recommendedOption,
     showHighlightedOption,
     handleOpenOptions,
     handleClickInputSearch,

src/components/inputSearch/inputSearch.tsx

@@ -43,6 +43,7 @@ const InputSearchComponent = React.forwardRef(
       ctv,
       blockBackPopover = false,
       searchFilterConfig,
+      caseSensitive,
       ...props
     }: IInputSearch<V>,
     ref: React.ForwardedRef<HTMLInputElement | undefined>
@@ -53,7 +54,6 @@ const InputSearchComponent = React.forwardRef(
     const {
       openOptions,
       optionsFiltered,
-      recommendedOption,
       searchText,
       inputPopoverText,
       valueSearchSelected,
@@ -102,6 +102,7 @@ const InputSearchComponent = React.forwardRef(
       onOptionClick,
       onInternalErrors,
       searchFilterConfig,
+      caseSensitive,
     });
 
     return (
@@ -111,6 +112,7 @@ const InputSearchComponent = React.forwardRef(
           innerRef as unknown as React.ForwardedRef<HTMLInputElement | undefined | null> | undefined
         }
         blockBackPopover={blockBackPopover}
+        caseSensitive={caseSensitive}
         device={device}
         hasHighlightedOption={showHighlightedOption}
         hasResultTextWrittenByUser={hasResultTextWrittenByUser}
@@ -122,7 +124,6 @@ const InputSearchComponent = React.forwardRef(
         maxLength={maxLength}
         open={openOptions}
         optionList={optionsFiltered}
-        recommendedOption={recommendedOption}
         searchText={searchText}
         state={state}
         styles={styles}

src/components/inputSearch/inputSearchStandAlone.tsx

@@ -60,6 +60,7 @@ export const InputSearchStandAloneComponent = (
         ref={ref}
         aria-controls={ariaControls}
         blockBackPopover={props.blockBackPopover}
+        caseSensitive={props.caseSensitive}
         closeIcon={props.closeIcon}
         dataTestId={props.dataTestId}
         device={props.device}
@@ -94,7 +95,6 @@ export const InputSearchStandAloneComponent = (
           (refInput as MutableRefObject<HTMLInputElement | null | undefined>)?.current,
           (refIcon as MutableRefObject<HTMLSpanElement | null | undefined>)?.current,
         ]}
-        recommendedOption={props.recommendedOption}
         searchText={props.searchText}
         state={props.state}
         styles={props.styles}

src/components/inputSearch/stories/argtypes.ts

@@ -320,6 +320,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.FUNCTIONS,
       },
     },
+    caseSensitive: {
+      description: 'Indicates if the search is case sensitive',
+      control: { type: 'boolean' },
+      type: { name: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     ['aria-controls']: {
       table: {
         disable: true,