Skip to:

  1. Skip to Jira Navigation
  2. Skip to Side Navigation
  3. Skip to Main Content

Page reset on entering a character in the search box

Description

In STRIPES-85, the idea is that as you successively type characters into the search box, c, a, t, so the UI URL is successively changed to /users/c, /users/ca, /users/cat. This worked fine while Users.js was the top-level script. But now that we go via index.js (to get more sophisticated routing) for some reason typing a character resets the form, so that the search-box is empty and defocussed.

CSP Request Details

None

CSP Rejection Details

None

Potential Workaround

None

Checklist

hide

TestRail: Results

Activity

Show:

Mike TaylorDecember 2, 2016 at 11:17 AM

You know what's good about this? The bug was a horribly, mysterious impenetrable mystery. But once I realised what was causing it, it did all make sense. That's such a good feeling.

Mike TaylorDecember 2, 2016 at 11:15 AM

Woo-hoo! Got it at last!

The problem was not React Router per se, but this code in `render()`:

<Match exactly pattern={`${pathname}`} component={connect(Users)}/> <Match exactly pattern={`${pathname}/:query`} component={connect(Users)}/> <Match pattern={`${pathname}/:query?/view/:userid`} component={connect(Users)}/>

It meant that `connect()` was getting called afresh each time the page was accessed, returning a new connected component instance which React does not recognise as cacheable – so each new render of the page was seen as a new page.

The fix was to create a connected component once, in the constructor, then use it as many times as necessary in `render()`.

Thanks to Bertrand for putting me on the right track!

Mike TaylorDecember 1, 2016 at 5:22 PM

Many anguished experiments, all intended to reach an understanding of what's going on, and all failed.

Have emailed Bertrand.

Am now attempting to build a tiny test-case at https://codepen.io/MichaelPTaylor/pen/WodpKQ?editors=0010

Mike TaylorNovember 30, 2016 at 5:14 PM

It's likely that the issue is to do with uncontrolled components:
https://facebook.github.io/react/docs/uncontrolled-components.html

Done

Details

Assignee

Reporter

Labels

Priority

TestRail: Cases

Open TestRail: Cases

TestRail: Runs

Open TestRail: Runs

Created November 25, 2016 at 1:15 PM
Updated December 12, 2016 at 9:48 AM
Resolved December 2, 2016 at 11:15 AM
TestRail: Cases
TestRail: Runs

Flag notifications