[WIP, DON'T MERGE] Replacing Typeahead, site-wide

[rfultz]

Summary

• Resolves Webpack upgrade: replace corejs-typeahead (search only) #4906
• Resolves Webpack upgrade: replace corejs-typeahead (filters) #5142

Replacing Typeahead with Autocomplete

Required reviewers

• couple front-end
• UX
• others to put it through its paces

Impacted areas of the application

• Header search, site-wide
• Search page
• Candidate lookup filters
• Committee lookup filters
• Regulatory citation lookup filters
• Statutory citation lookup Filters
• All other filters could be affected (if another builds and works, they're all probably fine)
• Any page that includes a Typehead/Autosuggest filter

Screenshots

Should be no visual changes

Related PRs

None

Known issues

Still working on MUR search, and need to test Legal and RAD lookups

How to test

There are a lot of places to test and a lot of ways, but they should generally all pass or fail the same way.

Generally, we want to make sure it

• looks right
  • mobile
  • desktop
• works as expected
  • keyboard typing + enter
  • keyboard typing + clicking an option
  • keyboard typing + arrow/tab navigation
  • keyboard typing + arrow/tab navigation with voiceover turned on
  • taps

Environment variable

There's an environment variable (FEC_USE_TYPEAHEAD) that will control whether the searches and lookups will use Typeahead or Autosuggest. To check which one you're getting, check developer tools:

• Typeahead's parents' classes include twitter-typeahead, tt-input
• Autosuggest's parents' classes include autoComplete_ and autosuggest

How to set:

• Use Typeahead:
  • don't set a value at all or
  • set it to True in your terminal or
  • set the default to True in base.py or
  • add FEATURES['use_tt'] = True under if FEC_CMS_ENVIRONMENT == ENVIRONMENTS['local']
• Use Autosuggest:
  • set it to False in your terminal or
  • set the default to False in base.py or
  • add FEATURES['use_tt'] = False under if FEC_CMS_ENVIRONMENT == ENVIRONMENTS['local']

---

Site header search on homepage

• Functionality
  • Choosing a candidate should take us to their details page
  • Choosing a committee should take us to their details page
  • Choosing to search individual contributions should take us to /data/receipts/individual-contributions/?contributor_name=[your term]
  • Choosing search other pages should take us to /search/?type=candidates&type=committees&type=site&query=[your term]

▪

• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard (click into field, type, arrow down, enter)
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Phone/tablet, touch
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3

---

Site header search on search page

Functionality if the field builds and works correctly on the homepage, it'll be fine here

▪

• Environment variable works
  • Header Typeahead appears when expected
  • Header Autosuggest appears when expected
  • Mid-page search Typeahead appears when expected
  • Mid-page search Autosuggest appears when expected
• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard (click into field, type, arrow down, enter)
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Phone/tablet, touch
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3

---

Site header search on any datatables page with filters (individual contributions)

Functionality if the field builds and works correctly on the homepage, it'll be fine here

• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard if it works for /search, it'll work here
• Phone/tablet, touch if it works for /search, it'll work here

---

Search page

• Functionality
  • Choosing a candidate should take us to their details page
  • Choosing a committee should take us to their details page
  • Choosing to search individual contributions should take us to /data/receipts/individual-contributions/?contributor_name=[your term]
  • Choosing search other pages should take us to /search/?type=candidates&type=committees&type=site&query=[your term]

▪

• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard (click into field, type, arrow down, enter)
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Phone/tablet, touch
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3

---

Datatables filters (individual contributions)

• Functionality
  • Check a couple of these, especially if there are two* on the same page
    • CANDIDATE*
    • CANDIDATE MENTIONED*
    • CANDIDATE NAME OR ID*
    • CONTRIBUTIONS RECEIVED BY
    • LEADERSHIP PAC SPONSOR
    • RECIPIENT NAME OR ID
    • SOURCE DETAILS Name or ID*
    • SPENDER NAME OR ID*
  • Candidate selection offers only candidates
  • Committee selection offers only committees
  • Searching by a candidate's or committee's number, their number should be changed to their ID in any text that appears on the screen
  • Selecting a result
    • adds the selection's name above the filter
    • adds the selection's name above the table
    • updates the table's results correctly
  • Deselecting the previous selection right above the filter should
    • Deselect that item
    • Remove its chiclet above the table
    • Update the table accordingly
  • Autosuggest filters don't collide with other Autosuggest filters
  • Autosuggest filters don't fight with non-Autosuggest filters

▪

• Environment variable works
  • Filters are Typeahead when expected
  • Filters are Autosuggest when expected
• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard (click into field, type, arrow down, enter)
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Phone/tablet, touch
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3

---

RAD contact form

• Functionality
  • COMMITTEE NAME OR ID in "Find your committee's analyst"
    • Offers only committees
    • Lists the analyst when a selection is made
    • Lists a different analyst when a different selection is made (may need to do that a few times)
  • COMMITTEE NAME OR ID in "Submit a question"
    • Offers only committees
    • Sets the form's hidden field as expected (Check source for name="u_committee")
    • Updates the hidden field when a different selection is made
  • Both fields on the page work as expected
  • Site header search is unaffected

▪

• Environment variable works
  • Typeaheads appear when expected
  • Autosuggests appear when expected
• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard (click into field, type, arrow down, enter)
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Phone/tablet, touch (if one works, the other should, too)
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3

---

Audit search

• Functionality
  • Candidate selection offers only candidates
  • Committee selection offers only committees
  • Searching by a candidate's or committee's number, their number should be changed to their ID in any text that appears on the screen
  • Selecting a result
    • adds the selection's name above the filter
    • adds the selection's name above the table
    • updates the table's results correctly
  • Deselecting the previous selection right above the filter should
    • Deselect that item
    • Remove its chiclet above the table
    • Update the table accordingly
  • Autosuggest filters don't collide with other Autosuggest filters
  • Autosuggest filters don't fight with non-Autosuggest filters

▪

• Environment variable works
  • Typeaheads appear when expected
  • Autosuggests appear when expected
• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard this functionality is the same across every Autosuggest filter
• Phone/tablet, touch this functionality is the same across every Autosuggest filter

---

MUR Search

• Functionality
  • 'Regulatory citation' filters for candidates
  • 'Statutory citation' filters for committees
  • Selecting a result
    • adds the selection's name above the filter
    • adds the selection's name above the table
    • updates the table's results correctly
  • Deselecting the previous selection right above the filter should
    • Deselect that item
    • Remove its chiclet above the table
    • Update the table accordingly
  • Autosuggest filters don't collide with other Autosuggest filters
  • Autosuggest filters don't fight with non-Autosuggest filters

▪

• Environment variable works
  • Typeaheads appear when expected
  • Autosuggests appear when expected
• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard this functionality is the same across every Autosuggest filter
• Phone/tablet, touch this functionality is the same across every Autosuggest filter

---

By the numbers (raising, spending)

• Functionality
  • Candidate search works correctly

▪

• Environment variable works
  • Typeahead appears when expected
  • Autosuggest appears when expected
• Desktop, mouse
  • Reviewer 1
  • Reviewer 2
  • Reviewer 3
• Desktop, keyboard this functionality is the same across every Autosuggest filter
• Phone/tablet, touch this functionality is the same across every Autosuggest filter