javascript - React-router ne mijenja rute s input onBlur događajem

Koristim React, Redux i React Router za aplikaciju i imam problema s korištenjem onBlur događaja na unosu zajedno s promjenom rute.

Imam komponentu "SearchResults" koja prikazuje popis internih poveznica. SearchResults se prikazuje samo kada je stanje searchActive istinito.

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

SearchResults ima popis poveznica prikazan u petlji...

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

Unos za pretraživanje (druga, neovisna komponenta) postavlja searchActive na true tijekom onFocus događaja i na false za onBlur događaj.

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

S ovim postavkama, kada kliknem na Link, ruta se ne mijenja. Međutim, ako uključim setTimeout, dobivam željeno ponašanje.

...

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

Ažuriranje

Akcija onBlur skriva komponentu SearchResults i ne registrira klik na Link. Postoji li način da registriram klik na Link prije nego što se izvrši akcija onBlur?

Zašto react-router ne registrira promjenu rute na klik Link kada pokrenem Redux akciju u onBlur povratnom pozivu?

Odgovor #1

Jednostavno, zato što se događaj onBlur pokreće prije nego što se dogodi događaj click, tj. vaš link nestaje iz DOM-a prije nego što može prepoznati da je kliknut.

Događaj onMouseDown se pokreće prije događaja onBlur, pa ako ga koristite za pokretanje navigacije, nije potrebno koristiti čarobne vremenske odgode.

Evo fiddle za demonstraciju: https://jsfiddle.net/bp80sg7w/2/