[CDX-232] Bugfix: Filter selection for facets with duplicate option values (#180)

* Update selectedOptionMap to use facet.name:option.value

* Update tests for Filters

* Update implementation

* Update implementation

* Lint

---------

Co-authored-by: Evan Yan <evan.yan@constructor.io>

Author: evanyan13

spec/components/Filters/Filters.test.jsx

@@ -10,6 +10,55 @@ import { getStateFromUrl } from '../../../src/utils';
 
 const filterProps = { facets: mockTransformedFacets };
 
+const mockFacetsWithDuplicateValues = [
+  {
+    displayName: 'Size',
+    name: 'size',
+    type: 'multiple',
+    data: {},
+    hidden: false,
+    options: [
+      {
+        status: '',
+        count: 28,
+        displayName: '0',
+        value: '0',
+        data: {},
+      },
+      {
+        status: '',
+        count: 229,
+        displayName: '1',
+        value: '1',
+        data: {},
+      },
+    ],
+  },
+  {
+    displayName: 'Rating',
+    name: 'rating',
+    type: 'multiple',
+    data: {},
+    hidden: false,
+    options: [
+      {
+        status: '',
+        count: 7,
+        displayName: '0',
+        value: '0',
+        data: {},
+      },
+      {
+        status: '',
+        count: 29,
+        displayName: '1',
+        value: '1',
+        data: {},
+      },
+    ],
+  },
+];
+
 describe('Testing Component: Filters', () => {
   const originalWindowLocation = window.location;
 
@@ -90,14 +139,19 @@ describe('Testing Component: Filters', () => {
       const colorFacetData = mockTransformedFacets.find(
         (facetGroup) => facetGroup.displayName === 'Color',
       );
+
       const selectedOption = colorFacetData.options.find((option) => option.status === 'selected');
-      expect(container.querySelector(`#${selectedOption.value}:checked`)).not.toBeNull();
+      expect(
+        container.querySelector(`input[id=${colorFacetData.name}-${selectedOption.value}]`),
+      ).toBeChecked();
 
       const newSelectedOption = colorFacetData.options.find(
         (option) => option.status !== 'selected',
       );
       fireEvent.click(getByText(newSelectedOption.value));
-      expect(container.querySelector(`#${newSelectedOption.value}:checked`)).not.toBeNull();
+      expect(
+        container.querySelector(`input[id=${colorFacetData.name}-${newSelectedOption.value}]`),
+      ).toBeChecked();
     });
 
     it('Should render correctly with render props', () => {
@@ -416,6 +470,32 @@ describe('Testing Component: Filters', () => {
       expect(updatedFiltersWithTwoSelected.color.includes(newSelectedOption.value)).toBe(true);
     });
 
+    it('OptionsList: Should handle duplicate option values between different facets correctly', async () => {
+      const { container } = render(
+        <CioPlp apiKey={DEMO_API_KEY}>
+          <Filters facets={mockFacetsWithDuplicateValues} />
+        </CioPlp>,
+      );
+
+      const sizeZeroCheckbox = container.querySelector('input[id="size-0"]');
+      const ratingZeroCheckbox = container.querySelector('input[id="rating-0"]');
+
+      // Select "0" option in Size facet
+      fireEvent.click(sizeZeroCheckbox);
+      expect(sizeZeroCheckbox).toBeChecked();
+      expect(ratingZeroCheckbox).not.toBeChecked();
+
+      // Select "0" option in Rating facet
+      fireEvent.click(ratingZeroCheckbox);
+      expect(sizeZeroCheckbox).toBeChecked();
+      expect(ratingZeroCheckbox).toBeChecked();
+
+      // Deselect "0" option in Size facet
+      fireEvent.click(sizeZeroCheckbox);
+      expect(sizeZeroCheckbox).not.toBeChecked();
+      expect(ratingZeroCheckbox).toBeChecked();
+    });
+
     it('SliderRange: Upon updating the input, requestFilters should not be updated if not blurred', async () => {
       const { container } = render(<TestFiltersApplied />);
 

src/components/Filters/FilterOptionListRow.tsx

@@ -2,25 +2,34 @@ import React from 'react';
 
 export interface FilterOptionListRowProps {
   id: string;
+  optionValue: string;
   displayValue: string;
   displayCountValue: string;
   isChecked: boolean;
-  onChange: (id: string) => void;
+  onChange: (value: string) => void;
   showCheckbox?: boolean;
 }
 
 export default function FilterOptionListRow(props: FilterOptionListRowProps) {
-  const { id, displayValue, displayCountValue, isChecked, onChange, showCheckbox = true } = props;
+  const {
+    id,
+    optionValue,
+    displayValue,
+    displayCountValue,
+    isChecked,
+    onChange,
+    showCheckbox = true,
+  } = props;
 
   return (
     <li className='cio-filter-multiple-option' key={id}>
       <label htmlFor={id}>
         <input
           type='checkbox'
           id={id}
-          value={displayValue}
+          value={optionValue}
           checked={isChecked}
-          onChange={() => onChange(id)}
+          onChange={() => onChange(optionValue)}
         />
         {showCheckbox && (
           <div className='cio-checkbox'>

src/components/Filters/FilterOptionsList.tsx

@@ -25,7 +25,8 @@ export default function FilterOptionsList(props: UseFilterOptionsListProps) {
       <ul className='cio-filter-multiple-options-list cio-collapsible-inner'>
         {optionsToRender.map((option) => (
           <FilterOptionListRow
-            id={option.value}
+            id={`${facet.name}-${option.value}`}
+            optionValue={option.value}
             displayValue={option.displayName}
             displayCountValue={option.count.toString()}
             isChecked={selectedOptionMap[option.value] || false}

src/components/Groups/Groups.tsx

@@ -67,6 +67,7 @@ export default function Groups(props: GroupsWithRenderProps) {
                     showCheckbox={false}
                     key={option.groupId}
                     id={option.groupId}
+                    optionValue={option.groupId}
                     displayValue={option.displayName}
                     displayCountValue={option.count.toString()}
                     isChecked={selectedGroupId === option.groupId}