Move from jQuery .bind, :first, .hover, .keyCode, :last, .submit, .trim

[rfultz]

Summary

• Resolves # (if we set this to 6410, will this one PR close that whole ticket? It'll have other PRs, too.)

Resolving the jQuery deprecations has been a burden so let's break #6411 into much smaller pieces

Required reviewers

• front-end for code
• anyone for functionality

Impacted areas of the application

General components of the application that this PR will affect:

.bind(), :first, .hover(), .keyCode, :last, .submit(), and .trim() on/in:

• Audits datatable
• Calendar
• Date filter
• Dropdowns
• Election map
• Helpers, getCookie? (I don't see where it's being used anywhere)
• Maps
• Search
• Skip nav
• Typeahead filter

Screenshots

No changes

Related PRs

Related PRs against other branches:

PR	Branch	Deprecated features
#6750	feature/jquery-deprecation-click	.click
#6751	feature/jquery-deprecation-change	.change
#6753	feature/jquery-migrations-focus-blur	.focus, .blur
#6752‡	feature/jquery-deprecations	.bind, :first, .hover, .keyCode, :last, .submit, .trim

‡you are here

How to test

• Pull the branch
• npm i
• npm run test-single should be clear
• npm run build
• ./manage.py runserver
• Checking the .bind() change:
  • Go to Audit search/datatables
  • Change the findings and issue categories filters a few times
  • The subcategory filters should update accordingly
• Checking the :first changes:
  • Go to a page with "dropdowns" (Candidates does. Not native <select> elements, but our dropdown selectors)
  • Click the down arrow to open it
  • The first element should be focused (tabbing should jump to the second one, then shift-tab will move back to the first)
• Checking the .hover() change:
  • Go to PAC and party committee reports
  • Expand the Dates filter panel
  • Under Transaction period time, click into the Beginning date field
  • Testing the date grid,
  • Select and re-select Beginning and Ending dates
  • The mouseenter and mouseleave actions work as expected
• Checking the .keyCode changes:
  • Go to the Calendar
  • Tab to any of the dropdowns (Subscribe, Download, any of the events' dropdowns)
  • The Enter key should open the dropdown (we're testing that it reads that it's the Enter key)
  • The Esc key should close the same dropdown (we're testing that it reads that it's the Esc key)
  • Re-load any page
  • Press the tab key to highlight the skip-nav element
  • Press Enter
  • The focus moved to the first element on the page that follows the site header nav
  • ISSUE: I can't find where to test the / key for inside search.js. Are we still using .js-search anywhere? (Move from jQuery .focus, .blur #6753 had the same issue)
• Checking the :last changes:
  • Go to a Senate election race ([MD, 2028] works)
  • Scroll to "Individual contributions to candidates"
  • Click "Contributor state"
  • Toggle to the map view (instead of table)
  • The map should appear, with states of various colors
• Checking the .submit() changes:
  • Go to any legal search page with a Keyword search (AOs, fines, etc)
  • Open a Keyword search to get the modal
  • Enter any keyword
  • Click the Search button in the modal
  • The left-panel filters submitted and the page/results updated
  • Go to any page with a site search Typeahead (homepage, /search, etc)
  • Type something into the Typeahead lookup (3+ letters)
  • Click/choose the "Search other pages:" option near the bottom
  • The form submitted and results were shown
• Checking the .trim() change:
  • I don't know how to test this—I don't think we're using getCookie anywhere
• Celebrate!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.83%. Comparing base (cfb73e9) to head (e92c57c).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #6752   +/-   ##
========================================
  Coverage    79.83%   79.83%           
========================================
  Files          237      237           
  Lines         5218     5218           
========================================
  Hits          4166     4166           
  Misses        1052     1052           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[patphongs]

Should this use .trigger('submit') now?

[rfultz]

I thought so when I added the comment!

I'll check when my system is back up, but I think this.form refers to the <form> instead of the $('form'). If this.form is a jQuery element, it should be .trigger('submit'), yes, but not if it's only the <form>. (jQuery moved to .trigger([event]) to avoid collisions with now-standard things like .click(), .change(), .submit()

[rfultz]

this.form is the <form> so .submit() is correct because it isn't a jQuery object.

(and my initial // TODO: jQuery deprecation was wrong)

[patphongs]

@rfultz

• :first, .hover(), .keyCode, :last, $.trim() looks like they're handled.
• I saw one more occurrence of submit that needs to be changed, commented on that
• Lots of occurrences of .bind() left for filter modules, calendar, dropdown, tables, and widgets. Since there's so much of these changes left, do you want to split bind into a separate PR?