how to support multiple selections in a hierarchical menu

[louna-nysaa]

Hey everyone! 👋

I'm currently working on implementing a hierarchical menu for my categories in a web application. In my third level of subcategories, I've introduced checkboxes, and I'm aiming to allow multiple selections for users.

i was tring to set refine to array value but not working

` const handleCheckboxChange = value => {
      const updatedState = {...checkboxState, [value]: !checkboxState[value]};
      setCheckboxState(updatedState);
      const selectedValues = [
        'Makeup > Brows > Brow Mascara',
        'Makeup > Brows > Brow Gel',
      ];
      const refinedValue = selectedValues.join(' AND ');

      // Now, pass `refinedValue` to the `refine` function
      refine(refinedValue);
    };`

` <div>
        {items.map(item => (
          <div key={item.label}>
            <label>
              <input
                type="checkbox"
                checked={checkboxState[item.value]}
                onChange={() => handleCheckboxChange(item.value)}
              />
              {item.label}
            </label>
            {item.items && (
              <div style={{marginLeft: '20px'}}>
                {item.items.map(subItem => (
                  <div key={subItem.label}>
                    <label>
                      <input
                        type="checkbox"
                        checked={checkboxState[subItem.value]}
                        onChange={() => handleCheckboxChange(subItem.value)}
                      />
                      {subItem.label}
                    </label>
                    {subItem.items && (
                      <div style={{marginLeft: '20px'}}>
                        {subItem.items.map(level3Item => (
                          <div key={level3Item.label}>
                            <label>
                              <input
                                type="checkbox"
                                checked={checkboxState[level3Item.value]}
                                onChange={() =>
                                  handleCheckboxChange(level3Item.value)
                                }
                              />
                              {level3Item.label}
                            </label>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>`

I'm using the connectHierarchicalMenu from react-instantsearch-dom. My challenge is figuring out how to handle multiple selections in level 3 checkboxes and then get results accordingly.

Any insights or examples on how to achieve this would be greatly appreciated! Thanks in advance! 🚀

[Haroenv]

Sorry, this is not a feature hierarchical menu has, due to the complexity of queries that would need to be done to calculate the count correctly.

[louna-nysaa]

so it is better to remove the widget and do not use hierarchical menu and use RefinementList for all category and sub categories ?

[Haroenv]

Yes, if you want to have a UI with multiple selections, it's better to list all potential categories manually, and use RefinementLists. This will create a more easy to use interface as well, as you'll be able to mix and match refinements from different parts of the "tree"