Filter clears after closing Modal on React Native

[dericksa]

Hello,

I've been facing a problem when trying to use RefinementList inside a modal on React Native. When the refinement occurs inside the modal and the modal is closed, for a brief moment the refined result appears and then it comes back to the previous result.

It appears that for some reason, when the modal is closed, it triggers the onSeartchStateChange with the previous search state.

I'm using Modal from 'react-native-modalbox'.

Here's the code:

              <InstantSearch
                searchState={this.state.searchState}
                onSearchStateChange={this.onSearchStateChange}
                searchClient={IAlgoliaApi.client}
                indexName={AppConfig.algoliaIndexName + '-best-seller-desc'}
               >

                <SearchBox
                    inputRef={ref => (this.textInputRef = ref)}
                    onFocus={this.onFocus}
                    input={this.state.searchInput ? this.state.searchInput : ''}
                    onEnterPress={this.onEnterPress}
                    navigation={this.props.navigation}
                    onSetValue={this.onSearchInputChange}
                    hasBackButton={true}
                    canClear={!productsIsValid}
                    rightAction={this.renderFilterButton()}
                />
                
                <Index indexName={AppConfig.algoliaIndexName + '-suggestions'}>
                    <Hits loadOnlyDistinct withoutRendering onHits={hits => this.mapSuggestion(hits)} />
                    <Configure hitsPerPage={4} distinct />
                </Index>


                <Index indexName={AppConfig.algoliaIndexName + '-best-seller-desc'}>
                    <StateResults onNewSearchResults={this.onNewSearchResults}>
                        <InfiniteHits
                            columnWrapperStyle={[styles.verticalCenterAlignedRow, styles.spaceBetween, { paddingHorizontal: 20 }]}
                            contentContainerStyle={[{ flexGrow: 1 }]}
                            showNoMore={!isShowingResults}
                            isShowingResults={isShowingResults}
                            refine={() => logDebug('')}
                            onRender={item => <ProductCard product={item} onPress={() => this.onProductPress(item)} />}
                        />
                        <Modal
                            onClosed={() => this.setState({ showFilterModal: false })}
                            isOpen={this.state.showFilterModal}
                            swipeToClose={false}
                            backdropPressToClose={false}
                            backButtonClose={true}
                        >
                            <CustomRefinementList attribute={'atributos.Cor Predominante'} />
                        </Modal>
                    </StateResults>
                </Index>

               

                <Configure hitsPerPage={20} facets={['*']} analytics={false} enablePersonalization={true} distinct />
            </InstantSearch>

[dericksa]

I was doing some tests. So basically, if the widget is not being rendered the widget refinement is erased?

[Haroenv]

That's correct @dericksa, a workaround you can use is to mount a virtual widget like this: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/?language=react#create-a-modal

Some related issues:

• Optional searchState cleanup when unmounting a connector #892 (specifically this: Optional searchState cleanup when unmounting a connector #892 (comment))
• Refinements applied in modal are cleared on close, virtual widget doesn't appear to be working? #1776
• How do I select an item after a do lookup and close modal and pass selected item back to main screen? #1542

[dericksa]

@Haroenv Thanks for the answer. The virtual widget workaround will serve me well 👍