question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When state is pushed, the UI does not seem to respond.

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:16 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
JasonStoltzcommented, Jul 30, 2020

@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.

1reaction
marcvangendcommented, Apr 2, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

UI does not update on state change · Issue #1 - GitHub
Currently it seems the active param doesn't listen to the provided state, as a result it doesn't seem to update when the state...
Read more >
Can't perform a React state update on an unmounted ...
Here is a simple solution for this. This warning is due to when we do some fetch request while that request ...
Read more >
React interactivity: Events and state - Learn web development
State is another powerful tool for React because components not only own state, but can update it later. It's not possible to update...
Read more >
React Hooks cheat sheet: Best practices with examples
If you find that useState / setState are not updating immediately, the answer is simple: they're just queues. React useState and setState don't ......
Read more >
How State Works in React – Explained with Code Examples
So let's fix this. import React from "react"; import ReactDOM from "react-dom"; const rootElement = document. getElementById("root"); let ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found