Algolia RefinementList clearing filters when exiting a radix ui primitive

103 Views Asked by At

I'm have a problem related to my Algolia <RefinementList /> Component when rendered within a radix ui popover element

Problem Selected filters are cleared when the popover element is closed. This is an example i am using.

<Popover.Root>
  <Popover.Trigger className="PopoverTrigger">By Category</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content asChild={true} align="start" className="PopoverContent" sideOffset={5}><RefinementList showMore={true} attribute="categories.title"></RefinementList>
      <Popover.Arrow className="PopoverArrow" />
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>

What I've Tried When reading the Radix documentation, specifically this one

I thought maybe the issue was this, and attempted to wrap the Refinement List component in a custom component like this:

const CustomRefinementList = (props) => <RefinementList {...props} />;

However this did not solve the issue. Does anyone have any ideas as to why this is occuring? The same problem also occurs with other Radix UI primitives such as accordions.

0

There are 0 best solutions below