Reactivesearch: onQueryChange Not Fired

[ymzoughi]

Issue Type:
Bug

Platform:
ReactiveSearch for Web

Description:
onQueryChange Not fired when query change

Minimal reproduction of the problem with instructions:

<DataSearch
                      componentId="searchbox"
                      dataField="modele"
                      highlightField="modele"
                      categoryField="properties.modele"
                      placeholder="Trouvez votre voiture..."
                      onValueChange={(value) => { this.onValueChange(value); }}
                    />

 <MultiList
          componentId="carsbrand"
          dataField="marque.raw"
          size={100}
          showSearch={false}
          title="Marque"
          onQueryChange={(prevQuery, nextQuery) => { console.log(nextQuery); }}
          react={{
            and: 'searchbox'
          }}

Reactivesearch version: 2.2.3

Browser: [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[metagrover]

Please update to the latest version. It should start working.

[ymzoughi]

Thank you, now it works.

[ymzoughi]

Hello @metagrover , please the problem occurred another time !

[metagrover]

Hi @ymzoughi, can you share the codesandbox link where you're seeing this problem?

[ymzoughi]

<ResultCard
              showResultStats
              className="autorobot-cards"
              componentId="result_card"
              size={12}
              dataField="marque.keyword"
              pagination
              onQueryChange={(prevQuery, nextQuery) => {
                this.queryChanged(prevQuery, nextQuery);
              }}
              sortOptions={[
                { label: 'Date descendante', dataField: 'inseredate', sortBy: 'desc' },
                { label: 'Date ascendante', dataField: 'inseredate', sortBy: 'asc' },
                { label: 'Prix ascendant', dataField: 'prix', sortBy: 'asc' },
                { label: 'Prix descendant', dataField: 'prix', sortBy: 'desc' },
              ]}
              react={{
                and: [
                  'energie',
                  'searchbox',
                  'carsmodel',
                  'carsbrand',
                  'cardate',
                  'drivenrange',
                  'ratingsSensor',
                  'pricerange',
                ],
              }}
              onData={this.onData}
              onResultStats={this.onResultStats}
            />

<MultiList
                          componentId="carsbrand"
                          dataField="marque.keyword"
                          size={100}
                          showSearch={false}
                          react={{
                            and: [
                              'result_card',
                              'searchbox',
                              'carsmodel',
                              'cardate',
                              'drivenrange',
                              'pricerange',
                              'ratingsSensor',
                            ],
                          }}
                          onValueChange={this.onBrandValueChange}
                          renderListItem={this.renderListItem}
                        />

[ymzoughi]

in fact the problem is that when using two ResultCard in the same page

[metagrover]

I think #362 is related. Will look into this 👍

[calebdel]

We're using a single ResultCard component and onQueryChange is not firing on MultiList and DataSearch Components.

Just upgraded from v2.3.2 to v2.6.2

[calebdel]

@metagrover noticed this is still marked as closed. Just checking if it's on your radar?

[metagrover]

Fixed with v2.6.5 🎉