Back button behavior on filtered lists

forumone / peacecorps-site

A place to think and work on a new Peace Corps website.

Other

13 stars 21 forks source link

Back button behavior on filtered lists #414

Closed bwilliams3 closed 8 years ago

bwilliams3 commented 8 years ago

In Chrome/Firefox/IE:

Load https://stage-donate.peacecorps.gov/donate/projects-funds/
Click any filter or sequence of filters
Click Back button
Sent to homepage https://stage-donate.peacecorps.gov/donate/

This works as expected in Safari, where at Step 4 you are sent to the initial filter page at https://stage-donate.peacecorps.gov/donate/projects-funds/

lizott commented 8 years ago

@defbyte can you take a look?

sshami commented 8 years ago

@defbyte FYI, I tested this on an older version of Chrome I had on my laptop (42.0) and the back button behavior worked fine. I'm updating my Chrome now to see if it stops functioning on the latest version.

sshami commented 8 years ago

Stopped working when I updated to the latest version of Chrome (46.0).

defbyte commented 8 years ago

thanks for the info @sshami I'll be checking this out.

We're using History pushState and popState to make entries in the browser's history

defbyte commented 8 years ago

This is ready for review on the Staging site

bwilliams3 commented 8 years ago

[Re-posting this comment to correct Issue thread]

@defbyte @sshami

Testing for Issue #414 in Chrome/FF/Safari:

This is working very well for common use cases -- navigating between category filters and into/out of individual project pages
One exception is "backing out" of an expanded project view, i.e.:
1. Go to https://stage-donate.peacecorps.gov/donate/projects-funds/#issue
2. Click Agriculture https://stage-donate.peacecorps.gov/donate/projects-funds/#issue?subSection=issue-9
3. Click Senegal https://stage-donate.peacecorps.gov/donate/projects-funds/#issue?subSection=issue-9&project=collapsible-project-1570
4. Click Back button; the URL in the browser bar correctly updates to the previous step, but Senegal remains expanded, which makes it appear to the user as though the Back button did nothing
5. Similarly, if you click Senegal, then Botswana, then "Back" to Senegal, Botswana remains expanded even though the URL updates correctly to Senegal.

defbyte commented 8 years ago

Thanks for the detailed replication steps @bwilliams3 this is incredibly helpful to diagnose the issue (which i am doing so now).

defbyte commented 8 years ago

Hi @bwilliams3 this issue is ready for review in the Staging environment.

please clear your cache before testing I noticed the .js was cached for me initially.

https://stage-donate.peacecorps.gov/donate/projects-funds/

bwilliams3 commented 8 years ago

@defbyte Works great, thanks!