selector: Allow the same value in multiple children aggregations

Author: psaiz

src/lib/components/BucketAggregation/BucketAggregationValues.js

@@ -134,12 +134,14 @@ const ValueElement = ({
   overridableId,
   keyField,
 }) => {
-  const { buildUID } = useContext(AppContext);
+  const { buildUID, nextComponentIndex } = useContext(AppContext);
   const label = bucket.label
     ? bucket.label
     : `${keyField} (${bucket.doc_count.toLocaleString("en-US")})`;
   const childAggCmps = getChildAggCmps(bucket);
-
+  /* Note that the checkbox does not have any `id`. It used to have one, based on the value, and the issue
+     was that, if the same value appeared more than once, react didn't like having two items with the same id,
+     and clicking on the second would select the first one */
   return (
     <Overridable
       id={buildUID("BucketAggregationValues.element", overridableId)}
@@ -152,7 +154,7 @@ const ValueElement = ({
       <List.Item key={bucket.key}>
         <Checkbox
           label={label}
-          id={`${bucket.key}-agg-value-checkbox`}
+          id={nextComponentIndex()}
           value={bucket.key}
           onClick={() => onFilterClicked(bucket.key)}
           checked={isSelected}

src/lib/components/ReactSearchKit/ReactSearchKit.js

@@ -35,15 +35,18 @@ export class ReactSearchKit extends Component {
     this.store = createStoreWithConfig(appConfig);
     this.appName = props.appName;
     this.eventListenerEnabled = props.eventListenerEnabled;
+    this.componentIndex = 0;
   }
-
   render() {
     const { appName, children, eventListenerEnabled, overridableId, searchOnInit } =
       this.props;
 
     const context = {
       appName,
       buildUID: (element, overrideId) => buildUID(element, overrideId, appName),
+      /* This is an internal function that will be used to create id for the checkboxes and labels, ensuring that
+          they are unique */
+      nextComponentIndex: () => `${this.appName}_${this.componentIndex++}`,
     };
 
     const _overridableId = buildUID("ReactSearchKit.children", overridableId, appName);

src/lib/state/selectors/query.test.js

@@ -154,6 +154,7 @@ describe("queries with second level filters.", () => {
       ["type", "Publication"],
     ]);
   });
+
   test("query with terms that start with the same text and with children", () => {
     const state = [
       ["file_type", "pdf", ["sub_type", "image"]],
@@ -165,6 +166,41 @@ describe("queries with second level filters.", () => {
 
     expect(newState).toEqual([["file_type", "pdf2"]]);
   });
+
+  test("query with `subtype: Validation` should add it to the correct type", () => {
+    const state = [
+      ["file_type", "pdf"],
+      ["type", "Documentation", ["subtype", "Validation"]],
+    ];
+
+    const query = ["type", "Publication", ["subtype", "Validation"]];
+
+    const newState = updateQueryFilters(query, state);
+
+    expect(newState).toEqual([
+      ["file_type", "pdf"],
+      ["type", "Documentation", ["subtype", "Validation"]],
+      ["type", "Publication", ["subtype", "Validation"]],
+    ]);
+  });
+
+  test("query with `subtype: Validation` should remove it from the correct type", () => {
+    const state = [
+      ["file_type", "pdf"],
+      ["type", "Documentation", ["subtype", "Validation"]],
+      ["type", "Publication", ["subtype", "Validation"]],
+    ];
+
+    const query = ["type", "Publication", ["subtype", "Validation"]];
+
+    const newState = updateQueryFilters(query, state);
+
+    expect(newState).toEqual([
+      ["file_type", "pdf"],
+      ["type", "Documentation", ["subtype", "Validation"]],
+      ["type", "Publication"],
+    ]);
+  });
 });
 
 describe("queries with third level filters.", () => {