1

I've got a CategorySearch box in my header that passes the selected value to a search results page via query params. It works great the first time.

But I want the header (w/ search box) to remain on the results page and allow users to change the search terms from the header. However if you change the search term in the header, the results page components won't re-render with the new query params even through the route changes.

If you change the second CategorySearch component on the results page, it does update. I plan on hiding this component once this is working.

I know I'm missing one piece to keep the components in sync. Any ideas?

Header component

<CategorySearch
   componentId="q"
   categoryField="_type"
   URLParams
   onValueSelected={val => this.props.router.push(`/search?q="${val}"`)}
   ...
/>

Results Page

<CategorySearch
    componentId="q"
    URLParams
    categoryField="_type"
/>

<ResultList
    componentId="result"
    dataField="title"
    pagination={true}
    URLParams
    react={{
      and: [
        'q',
      ],
    }}
    onData={this.renderData}
/>

You can see in this example below, I first ran the search "test" from the homepage which landed me on the results page with the correct "test" search results. But then I changed my search query in the header to "yoga" and pressed enter. It changed the route but the search results still show for "test".

Example: https://i.stack.imgur.com/VEmLz.gif

Thanks in advance for the help!

Justin Ramers
  • 11
  • 2

1 Answers1

0

Removing the URLParams from both CategorySearch and ResultList help me.

Hope this will help you too !

Sachin Dongare
  • 58
  • 1
  • 7