Merge pull request #932 from Eastern-Research-Group/bugfix/664_fix-vi…

…rtualized-list-scroll

HMW-664 Switched from react-window to react-virtuoso

app/client/package.json

@@ -48,7 +48,6 @@
     "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
     "@types/react-ranger": "2.0.4",
-    "@types/react-window": "1.8.8",
     "@types/smoothscroll-polyfill": "0.3.3",
     "@types/uuid": "9.0.7",
     "husky": "8.0.3",
@@ -90,7 +89,7 @@
     "react-sticky-box": "2.0.5",
     "react-switch": "7.0.0",
     "react-table": "7.8.0",
-    "react-window": "1.8.10",
+    "react-virtuoso": "4.6.2",
     "smoothscroll-polyfill": "0.4.4",
     "uuid": "9.0.1"
   },

app/client/src/components/pages/StateTribal.Tabs.AdvancedSearch.js

@@ -1,16 +1,16 @@
 // @flow
 /** @jsxImportSource @emotion/react */
 
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { css } from '@emotion/react';
 import { useWindowSize } from '@reach/window-size';
 import Select, { createFilter } from 'react-select';
 import * as query from '@arcgis/core/rest/query';
 // components
 import LoadingSpinner from 'components/shared/LoadingSpinner';
 import { GlossaryTerm } from 'components/shared/GlossaryPanel';
-import MenuList from 'components/shared/MenuList';
 import Modal from 'components/shared/Modal';
+import PaginatedSelect from 'components/shared/PaginatedSelect';
 import StateMap from 'components/shared/StateMap';
 import WaterbodyListVirtualized from 'components/shared/WaterbodyListVirtualized';
 // styled components
@@ -344,6 +344,13 @@ function AdvancedSearch() {
 
   // get a list of watersheds and build the esri where clause
   const [watersheds, setWatersheds] = useState(null);
+  const watershedOptions = useMemo(() => {
+    return watersheds
+      ? watersheds
+          .filter((watershed) => watershed.label) // filter out nulls
+          .sort((a, b) => a.label.localeCompare(b.label))
+      : [];
+  }, [watersheds]);
   useEffect(() => {
     if (activeState.value === '' || !watershedsLayerMaxRecordCount) return;
 
@@ -407,6 +414,11 @@ function AdvancedSearch() {
 
   // these lists just have the name and id for faster load time
   const [waterbodiesList, setWaterbodiesList] = useState(null);
+  const waterbodiesOptions = useMemo(() => {
+    return waterbodiesList
+      ? waterbodiesList.sort((a, b) => a.label.localeCompare(b.label))
+      : [];
+  }, [waterbodiesList]);
   // Get the features on the waterbodies point layer
   useEffect(() => {
     if (!stateAndOrganization || !summaryLayerMaxRecordCount) {
@@ -844,43 +856,27 @@ function AdvancedSearch() {
             </GlossaryTerm>
             :
           </span>
-          <Select
+          <PaginatedSelect
             aria-label="Watershed Names (HUC12)"
-            isMulti
             isLoading={!watersheds}
             disabled={!watersheds}
-            components={{ MenuList }} // virtualized list
             filterOption={createFilter({ ignoreAccents: false })} // performance boost
-            options={
-              watersheds
-                ? watersheds
-                    .filter((watershed) => watershed.label) // filter out nulls
-                    .sort((a, b) => a.label.localeCompare(b.label))
-                : []
-            }
+            options={watershedOptions}
             value={watershedFilter}
             onChange={(ev) => setWatershedFilter(ev)}
-            styles={reactSelectStyles}
           />
         </div>
 
         <div css={inputStyles}>
           <label htmlFor="waterbodies">Waterbody Names (IDs):</label>
-          <Select
-            inputId="waterbodies"
-            isMulti
-            isLoading={!waterbodiesList}
+          <PaginatedSelect
             disabled={!waterbodiesList}
-            components={{ MenuList }} // virtualized list
             filterOption={createFilter({ ignoreAccents: false })} // performance boost
-            options={
-              waterbodiesList
-                ? waterbodiesList.sort((a, b) => a.label.localeCompare(b.label))
-                : []
-            }
-            value={waterbodyFilter}
+            inputId="waterbodies"
+            isLoading={!waterbodiesList}
             onChange={(ev) => setWaterbodyFilter(ev)}
-            styles={reactSelectStyles}
+            options={waterbodiesOptions}
+            value={waterbodyFilter}
           />
         </div>
       </div>

app/client/src/components/shared/CharacteristicsSelect.tsx

@@ -1,17 +1,16 @@
 /** @jsxImportSource @emotion/react */
 
 import { useContext, useMemo } from 'react';
-import Select from 'react-select';
 import { css } from '@emotion/react';
 // components
 import { GlossaryTerm } from 'components/shared/GlossaryPanel';
-import MenuList from 'components/shared/MenuList';
+import PaginatedSelect from 'components/shared/PaginatedSelect';
 // contexts
 import { LocationSearchContext } from 'contexts/locationSearch';
 // utils
 import { useMonitoringLocations } from 'utils/hooks';
 // styles
-import { groupHeadingStyles, reactSelectStyles } from 'styles/index';
+import { groupHeadingStyles } from 'styles/index';
 
 export default CharacteristicsSelect;
 export function CharacteristicsSelect({
@@ -66,19 +65,16 @@ export function CharacteristicsSelect({
         Filter by{' '}
         <GlossaryTerm term="Characteristics">Characteristics</GlossaryTerm>:
       </span>
-      <Select
+      <PaginatedSelect
         aria-label="Filter by Characteristics"
-        components={{ MenuList }}
         formatGroupLabel={formatGroupLabel}
         formatOptionLabel={formatOptionLabel}
         isDisabled={monitoringPeriodOfRecordStatus === 'failure'}
         isLoading={monitoringPeriodOfRecordStatus === 'pending'}
-        isMulti
         onChange={(options) => onChange(options.map((option) => option.value))}
         options={allCharacteristicOptions}
         placeholder="Select one or more characteristics..."
         styles={{
-          ...reactSelectStyles,
           groupHeading: (defaultStyles) => ({
             ...defaultStyles,
             ...groupHeadingStyles,