Revert selectors to USWDS

meteor_packages/mats-common/client/main.js

@@ -13,6 +13,6 @@ import "../imports/startup/both";
 import "@fortawesome/fontawesome-free";
 import "@fortawesome/fontawesome-free/css/all.css";
 import "@fortawesome/fontawesome-free/js/all.js";
-import "use-bootstrap-select/dist/use-bootstrap-select.css";
-import "use-bootstrap-select/dist/use-bootstrap-select.js";
+import "@uswds/uswds/dist/css/uswds.min.css";
+import "@uswds/uswds/dist/js/uswds.min.js";
 import "daterangepicker/daterangepicker.css";

meteor_packages/mats-common/imports/startup/client/select_util.js

@@ -23,7 +23,6 @@ const refreshDependents = function (event, param) {
         const name = dependentNames[i];
         const targetParam = matsParamUtils.getParameterForName(name);
         const targetElem = matsParamUtils.getInputElementForParamName(targetParam.name);
-        const targetID = matsParamUtils.getInputIdForParam(targetParam);
         try {
           if (
             !(
@@ -55,9 +54,6 @@ const refreshDependents = function (event, param) {
               targetOptions[i2].selected = select;
             }
           }
-          if (global.selectorHandlers[targetID]) {
-            global.selectorHandlers[targetID].update();
-          }
         }
       }
     }
@@ -533,13 +529,6 @@ const refresh = function (event, paramName) {
         optionsAsString += "</optgroup>";
       }
       $(`select[name="${name}"]`).empty().append(optionsAsString);
-      const selectorID = matsParamUtils.getInputIdForParam(
-        matsParamUtils.getParameterForName(name)
-      );
-      if (global.selectorHandlers[selectorID]) {
-        global.selectorHandlers[selectorID].update();
-      }
-
       // reset the selected index if it had been set prior (the list may have changed so the index may have changed)
       let selectedOptionIndex;
       let selectedOptionOverlap = [];
@@ -638,10 +627,6 @@ const refresh = function (event, paramName) {
           );
         }
       }
-      const targetID = matsParamUtils.getInputIdForParam(param);
-      if (global.selectorHandlers[targetID]) {
-        global.selectorHandlers[targetID].update();
-      }
     } catch (e) {
       e.message = `INFO: Error in select.js refresh: resetting selected options: ${e.message}`;
       setInfo(e.message);

meteor_packages/mats-common/lib/param_util.js

@@ -96,6 +96,14 @@ const getInputIdForParam = function (param) {
 // get the document element that corresponds to the param name
 const getInputElementForParamName = function (paramName) {
   const param = getParameterForName(paramName);
+  if (param.type === matsTypes.InputTypes.select && !param.multiple) {
+    const classElem = document.getElementsByClassName(
+      `data-input usa-select ${param.name} usa-sr-only usa-combo-box__select`
+    )[0];
+    if (classElem) {
+      return classElem;
+    }
+  }
   const id = getInputIdForParam(param);
   if (id === undefined) {
     return undefined;
@@ -169,13 +177,6 @@ const setInputForParamName = function (paramName, value) {
   // SHOULD DEAL WITH CHECKBOXES HERE
   if (param.type === matsTypes.InputTypes.radioGroup) {
     $(`#${id}-${value}`).prop("checked", true);
-  } else if (
-    elem &&
-    global.selectorHandlers[id] &&
-    global.selectorHandlers[id].getValue() !== value
-  ) {
-    global.selectorHandlers[id].setValue(value);
-    setValueTextForParamName(paramName, value);
   } else if (elem && elem.type === "select-multiple") {
     $(`#${id}`).val(value);
     setValueTextForParamName(paramName, value);

meteor_packages/mats-common/package.js

@@ -50,7 +50,7 @@ Package.onUse(function (api) {
     "vanillajs-datepicker": "1.3.4",
 
     // make things pretty
-    "use-bootstrap-select": "2.2.1",
+    "@uswds/uswds": "3.13.0",
     "lighten-darken-color": "1.0.0",
     "rgb-hex": "4.1.0",
     "hex-rgb": "5.0.0",

meteor_packages/mats-common/public/MATSReleaseNotes.html

@@ -6,12 +6,10 @@ <h4>All apps v6.2.3</h4>
   <p style="margin: 25px 0"></p>
   <p>Changes:</p>
   <p>* Added new MATS logo.</p>
-  <p>* Replaced USWDS selectors with Bootstrap 5 selectors.</p>
   <p>* Improved metadata for 1 Hour Precipitation app.</p>
   <p>* Fixed bug where date selector would open on page load.</p>
   <p>* Fixed bug where METAR app would not let you filter by negative numbers.</p>
   <p>* Fixed plotly bug casuing contour plot min and max to be ignored.</p>
-  <p>* Edited curves don't go out of edit mode until you click save.</p>
   <p>* Removed unnecessary and irritating reset to defaults calls.</p>
   <p>
     * Fixed bug where threshold plots had the wrong axis label in most apps (Upper Air

meteor_packages/mats-common/templates/selectorItems/item.js

@@ -243,12 +243,7 @@ Template.item.events({
       if (elem !== null) {
         elem.style.display = "block";
         if (this.type === matsTypes.InputTypes.select) {
-          // need to foricibly open the selector for the select
-          if (global.selectorHandlers[`${this.name}-${this.type}`]) {
-            global.selectorHandlers[`${this.name}-${this.type}`].show();
-          } else {
-            $(`#${this.name}-${this.type}`).trigger("click");
-          }
+          $(`#${this.name}-${this.type}`).trigger("click"); // need to foricibly open the selector for the select
         }
         if (this.type === matsTypes.InputTypes.selectMap) {
           $("#mapModal").modal("show");

meteor_packages/mats-common/templates/selectorItems/select.html

@@ -1,6 +1,6 @@
 <template name="select">
+  {{#if isMultiple}}
   <div>
-    {{#if isMultiple}}
     <div class="btn-group btn-group-sm">
       <button
         type="button"
@@ -24,28 +24,39 @@
         Done
       </button>
     </div>
-    {{/if}} {{#if isSites}}
     <div class="bg-white" style="font-size: smaller">
       Use ctrl + click (PC) or cmnd + click (Mac) to select multiple values.
     </div>
-    {{else}}
-    <div class="bg-white" style="font-size: smaller">
-      Begin typing to filter options.
+    <div>
+      <select
+        class="data-input form-select bg-white fs-6 {{name}}"
+        name="{{name}}"
+        id="{{name}}-{{type}}"
+        size="15"
+        aria-label="{{name}} options"
+        {{multiple}}
+      >
+        <option initial>initial</option>
+      </select>
     </div>
-    {{/if}}
   </div>
-  <div>
-    <select
-      class="data-input form-select bg-white fs-6 {{name}}"
-      data-searchable="true"
-      data-max-height="20rem"
-      name="{{name}}"
-      id="{{name}}-{{type}}"
-      size="15"
-      aria-label="{{name}} options"
-      {{multiple}}
+  {{else}}
+  <div class="usa-form-group m-0 width-mobile-lg">
+    <label class="usa-label fs-6 pt-1 width-mobile-lg" for="{{name}}-{{type}}"
+      >Type into the textbox directly below this message to filter {{name}}
+      options</label
     >
-      <option initial>initial</option>
-    </select>
+    <div class="usa-combo-box width-mobile-lg">
+      <select
+        class="data-input usa-select {{name}}"
+        name="{{name}}"
+        id="{{name}}-{{type}}"
+        aria-label="{{name}} options"
+        {{multiple}}
+      >
+        <option value="initial">initial</option>
+      </select>
+    </div>
   </div>
+  {{/if}}
 </template>