Changing operator of a refinement list erases any existing refinements

[callmekatootie]

I am using React InstantSearch.

I have a <RefinementList /> component for an attribute / facet. My user can toggle between OR or AND operators.

I find that if a user selects certain values for refinement, and then proceeds to toggle the operator, the selected values are erased.

Bug or Feature? Seems to be a wrong decision to erase any existing refinements if the operator changes... The only thing that needs to change is how the values are treated.

Is there anyway (besides having to remember the state myself) to prevent this?

EDIT: I would like to add another behaviour that just seems to be a poor decision (again - not sure if bug or feature). When the refinement is cleared in the above scenario, the onStateChange() prop on the <InstantSearch /> component does not fire... I mean, the state did change... the refinements were erased - so I would expect this method to trigger...

[Haroenv]

It's a feature and a limitation of the way the change in parameters is handled. When a parameter of a widget changes, it's assumed that the previous widget stops displaying and a new widget with the new parameters gets added. If for example you'd change the attribute, the refinement obviously should be cleared. For operator that could be an exception that the state could be kept, but there's no functionality of that.

You'll have to keep track of the state before changing the operator (eg via ui state from useInstantSearch) and re-apply it after changing the operator.

[callmekatootie]

Thank you for your response @Haroenv. Is there an example of this. I am not sure if I am running into a race condition or something like that because when I do try to capture state, change operator and re-apply the state, it does not get set. I even tried using setTimeout() to wait few seconds before I apply the earlier refinements (through setIndexUiState), but to no avail.

[Haroenv]

https://codesandbox.io/p/sandbox/wonderful-dust-5sy9l5?file=%2Fsrc%2FApp.tsx

function SwitchableRefinementList(props: UseRefinementListProps) {
  const { indexUiState, setIndexUiState } = useInstantSearch();
  const [operator, setOperator] = useState<"and" | "or">("or");

  const handleClick = useCallback(() => {
    const state = indexUiState;
    setOperator((o) => (o === "and" ? "or" : "and"));
    // debounced, as changing the attribute takes effect async
    setTimeout(() => setIndexUiState(state), 0);
  }, [indexUiState]);

  return (
    <>
      <button onClick={handleClick}>operator: {operator}</button>
      <RefinementList {...props} operator={operator} />
    </>
  );
}

Screen.Recording.2025-01-10.at.11.10.31.mov

[callmekatootie]

Thank you. Your approach worked.

Any reason why setTimeout is needed though. There's no mention of the async bit in the docs.

[Haroenv]

this is a bit of an edge case, but to prevent unstable situations like a function in props causing the widget to remount, we only unmount effects in a timeout, so without the timeout you're setting the ui state before the remove widget from when you change the operator takes in effect. https://github.com/algolia/instantsearch/blob/master/packages/react-instantsearch-core/src/lib/useWidget.ts#L81