search-ui: When state is pushed, the UI does not seem to respond.

https://github.com/swiftype/demo-asecom/issues/12

This, I think, could be a problem. What if a user does want to push a new state the URL with a new query string. We had this case in an ecommerce demo, where from the main search bar in the header, the autocomplete was configured to navigate to “?q={search_term}”. This was using Gatsby, so that was ultimately a called to pushState, which we are currently explicitly filtering out.

https://github.com/elastic/search-ui/blob/0cc15c2e1e66305d2f91dc3b0918c02e85919c52/packages/search-ui/src/URLManager.js#L128-L130

I think we should instead be detecting that if the push state call is our OWN push state call, then we want to return early. This could possibly done by pushing some additional state that we could inspect.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 16 (7 by maintainers)

Most upvoted comments

@marcvangend I modified your code sandbox, check it out: https://codesandbox.io/s/modest-night-dx1gu

I think this is the way you need to handle a global search box.

  1. Have a separate SearchProvider for your global search box.
  2. Implement a onSubmit on your global search box which does a history.push to /search?q=searchTerm 1 Make sure your global search box has trackUrlState turned off
  3. Have a separate SearchProvider for your Search Page
  4. Make sure you add a key to your /search route so that it is re-rendered when the search term changes

This is how we’ve dealt with this in the past. If this is insufficient for some reason, let me know.

Thank you for looking into this. Here is a minimalist code sandbox that demonstrates the problem I’m trying solve: https://codesandbox.io/s/busy-haibt-c3vwv. As you can see, the search box triggers a search requests and alters the url, but you don’t get redirected to the search page.