React-router does not change routes with onBlur input event

Question

I use React, Redux and React Router for the application and have problems using the input event onBlurin tandem with a route change.

I have a SearchResults component that contains a list of internal links. SearchResultsonly shows when the state is searchActivetrue.

<div>
    {props.searchActive ? <SearchResults /> : props.children}
</div>

SearchResults has a list of links displayed in a loop ...

<Link key={Math.random()} to={r.path}>{r.name}</Link>

The search entry (another independent component) sets searchActive- trueduring the event onFocusand falsefor the event onBlur.

<input
    onFocus={() => {
        // dispatch Redux action (set "searchActive" to true)
        props.startSearch();
    }}
    onBlur={() => {
        // dispatch Redux action (set "searchActive" to false)
        props.endSearch();
    }}
/>

With this setting, when I click on Link, the route does not change. However, if you include a setTimeout, I get the desired behavior.

...

    setTimeout(() => {
        props.endSearch();
    }, 400)
...

---

Update

onBlur SearchResults Link. "" onBlur?

---

, Link, Redux onBlur?

Answer 1

, onBlur , click , .. DOM, , .

onMouseDown onBlur, , , -.

: https://jsfiddle.net/bp80sg7w/2/