Refinement list checked Filter Reset when Dialog modal is Closed

Question

Hi everyone I am facing issue I have React instant Search Refinement list in Mobile Filter Menu Dialog when i close the menu the Checked filter is reset I don't know what is happening

This is my instant search and Search Data is my Main component

<InstantSearch searchClient={searchClient} indexName={searchIndex} >
   
    <Configure hitsPerPage={50} getRankingInfo={true}  />
    <SearchData
      {...{
        mobileFiltersOpen,
        setMobileFiltersOpen,
        selectedEarningsRange,
        selectedDegree,
        setSelectedEarningsRange,
        setSelectedDegree,
        setSearchIndex,
        searchIndex,
      }}
    />
  </InstantSearch>

Now here is my main a Dialog From HeadlessUI React and Refinemenlist

     <Transition.Root show={mobileFiltersOpen} as={Fragment}>
          <Dialog
            as='div'
            className='relative z-40 lg:hidden'
            onClose={closemodel}

            
          >
            <div className='fixed inset-0 z-40 flex'>
              <Transition.Child
                as={Fragment}
                enter='transition ease-in-out duration-300 transform'
                enterFrom='translate-x-full'
                enterTo='translate-x-0'
                leave='transition ease-in-out duration-300 transform'
                leaveFrom='translate-x-0'
                leaveTo='translate-x-full'
              >
                <Dialog.Panel className='relative ml-auto flex h-full w-full max-w-full flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl inset-0-full'
                >
                  <div className='flex items-center justify-between px-4'>
                    <h2 className='text-lg font-medium text-gray-900'>
                      Filters
                    </h2>
                    <button
                      type='button'
                      className='-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400'
                     onClick={closemodel}
                    >
                      <span className='text-lg font-medium text-gray-900' >Close</span>
                      <XMarkIcon className='h-6 w-6' aria-hidden='true' />
                    </button>
                  </div>

                  {/* Filters */}
                  <div className='mt-4 ml-4 border-t border-gray-200'>
             
                    <RefinementList
                      attribute='CREDDESC'
                      limit={10}
                      
                      classNames={{
                        root: 'space-y-6',
                        labelText: 'ml-1',
                        label: 'text-sm text-gray-500',
                        input:
                          'h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500',
                      }}
                    />
                    </div>
                   </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </Dialog>
        </Transition.Root>

Now Problem is when on Mobile when I checked some filter and close modal the Filters also Reset please anyone Can help on this

Answer 1

This is the default behavior of the library. When you mount your RefinementList, it triggers a request even before you select a refinement. When you unmount RefinementList, it is removed from the state and all its refinements are lost.

But you have some solutions:

• Hide the component instead of unmount it

If you use react-instant-search-hooks you can also

• Use a virtual widget on the same attribute
• Use the hook on a parent element

You can find more informations in the documentation