scroll to category. fixes #46

slaurent22 · Oct 5, 2021 · 66f6167 · 66f6167
1 parent f51dac4
commit 66f6167
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/components/CategorySelect.tsx b/src/components/CategorySelect.tsx
@@ -43,6 +43,16 @@ const customStyles: StylesConfig<CategoryOption> = {
     },
 };
 
+// https://stackoverflow.com/a/66710895
+const onMenuOpen = () => {
+    setTimeout(()=>{
+        const selectedEl = document.getElementsByClassName("MyDropdown__option--is-selected")[0];
+        if (selectedEl) {
+            selectedEl.scrollIntoView({ behavior: "smooth", block: "center", });
+        }
+    }, 15);
+};
+
 function defToOption({ fileName, displayName, }: CategoryDefinition): CategoryOption {
     return {
         value: fileName, label: displayName,
@@ -76,6 +86,9 @@ const CategorySelect: React.FC<Props> = ({
             options={optGroups}
             styles={customStyles}
             onChange={newValue => onChange(newValue ? optionToDef(newValue) : null)}
+            onMenuOpen={onMenuOpen}
+            className ={"MyDropdown"}
+            classNamePrefix={"MyDropdown"}
             placeholder="Category: Select or type to search..."
             theme={theme => ({
                 ...theme,