Revert "Merge pull request #1161 from 18F/hjb/remove-chosen" (#1224)

* Revert "Merge pull request #1161 from 18F/hjb/remove-chosen"

This reverts commit 80ac913, reversing
changes made to 0b037bf.

* Update javascript dependencies

package.json

@@ -12,6 +12,7 @@
     "node": ">=8.10.0"
   },
   "dependencies": {
+    "chosen-js": "^1.8.7",
     "jquery": "^3.5.1",
     "node-sass": "^4.14.1",
     "uswds": "^2.10.0"

tock/tock/static/js/components/timecard.js

@@ -104,7 +104,7 @@ function populateHourTotals() {
 
 function toggleNotesField(selectBox) {
   var $fieldset = $(selectBox).parents('.entry-project'),
-    $selected = $fieldset.find(':selected'),
+    $selected = $(selectBox).find(':selected'),
     $notes = $fieldset.find('.entry-note-field'),
     notesDisplayed = $selected.data('notes-displayed'),
     notesRequired = $selected.data('notes-required');
@@ -118,7 +118,7 @@ function toggleNotesField(selectBox) {
 
 function displayAlerts(selectBox) {
   var $fieldset = $(selectBox).parents('.entry-project'),
-    $selected = $fieldset.find(':selected'),
+    $selected = $(selectBox).find(':selected'),
     $alerts = $fieldset.find('.entry-alerts'),
     all_alerts = $selected.data('alerts'),
     alert_text;
@@ -164,6 +164,7 @@ function addTockLines(tockLines) {
     setTimeout(function () {
       // Set the project and trigger a GUI update
       $("div.entry:last .entry-project select").val(line.project);
+      $("div.entry:last .entry-project select").trigger("chosen:updated");
 
       // Set the hours and trigger a data update
       $("div.entry:last .entry-amount input").val(line.hours);
@@ -196,6 +197,11 @@ $("body").on("change", ".entry-project select", function () {
 
 
 $(document).ready(function () {
+  var chosenOptions = {
+    search_contains: true,
+    group_search: false
+  };
+
   $("#save-timecard").on("click", function () {
     // Clear anything saved locally.  The server is the
     // source of truth.
@@ -219,7 +225,7 @@ $(document).ready(function () {
   $(".add-timecard-entry").on("click", function () {
     $('div.entry:last').clone().each(function (i) {
       var entry = $(this);
-      entry.find('.autocomplete__wrapper').remove();
+      entry.find('.chosen-container').remove();
       entry.find('.entry-alerts').empty();
       entry.find('.entry-note-field').toggleClass('entry-hidden', true);
       entry.find('.entry-note-field .invalid').remove();
@@ -256,13 +262,8 @@ $(document).ready(function () {
       });
     }).appendTo('.entries');
 
-    accessibleAutocomplete.enhanceSelectElement({
-      showAllValues: true,
-      defaultValue: '',
-      selectElement: document.querySelector('div.entry:last-child .entry-project select')
-    });
-
     $('div.entry:last').find('.entry-project select')
+      .chosen(chosenOptions)
       .on('change', function (e) {
         toggleNotesField(this);
         displayAlerts(this);
@@ -303,16 +304,8 @@ $(document).ready(function () {
   // Run on initial load
   populateHourTotals();
 
-  const selects = document.querySelectorAll('.entry-project select');
-  selects.forEach(select => {
-    accessibleAutocomplete.enhanceSelectElement({
-      showAllValues: true,
-      defaultValue: '',
-      selectElement: select
-    })
-  });
-
-  $('.entry-project input')
+  $('.entry-project select')
+    .chosen(chosenOptions)
     .on('change', function (e) {
       toggleNotesField(this);
       displayAlerts(this);

tock/tock/static/sass/_entries.scss

@@ -106,17 +106,9 @@
     }
 }
 
-.entry-project {
-  .autocomplete__dropdown-arrow-down {
-    z-index: 1; //override to accessible-autocomplete's -1 index, which hides arrow
-    top: 18px; //override to accommodate extra margin on input
-  }
-  .autocomplete__hint, .autocomplete__input {
-    border: 1px solid #565c65;
-    color: #1b1b1b;
-    margin-top: 0.5rem;
-  }
-}
+/*.entry-project {
+	@include span-columns(6);
+}*/
 
 .entry-notes {
     textarea {

tock/tock/templates/base.html

@@ -17,12 +17,12 @@
   <meta name="tock-icon-angry" content="{% static 'img/favicon-angry' %}">
   <link rel="stylesheet" href="{% static 'css/dist/core.css' %}">
   <link rel="stylesheet" href="{% static 'vendor/jqueryui_v1.12.1/jquery-ui.min.css' %}">
+  <link rel="stylesheet" href="{% static 'vendor/chosen_v1.8.7/chosen.min.css' %}">
   <link rel="stylesheet" href="{% static 'css/vendor/font-awesome.min.css' %}">
-  <link rel="stylesheet" href="{% static 'vendor/accessible-autocomplete_v2.0.3/css/accessible-autocomplete.min.css' %}" />
   <script src="{% static 'vendor/jquery_v3.5.1/jquery.min.js' %}"></script>
+  <script src="{% static 'vendor/chosen_v1.8.7/chosen.jquery.min.js' %}"></script>
   <script src="{% static 'vendor/jqueryui_v1.12.1/jquery-ui.min.js' %}"></script>
   <script src="{% static 'vendor/uswds_v2.3.1/js/uswds.min.js' %}"></script>
-  <script type="text/javascript" src="{% static 'vendor/accessible-autocomplete_v2.0.3/js/accessible-autocomplete.min.js' %}"></script>
 
   <script src="{% static 'js/components/notifications.js' %}"></script>
   <script>