implement Scroll flash into SelectPanel (#1276)

* implement scrollflash into SelectPanel

* Update src/hooks/useScrollFlash.ts

Co-authored-by: Clay Miller <[email protected]>

* revise useScrollFlash

* don't dispatch scrollFlash event

Co-authored-by: Clay Miller <[email protected]>

Author: VanAnderson

src/FilteredActionList/FilteredActionList.tsx

@@ -11,6 +11,7 @@ import {itemActiveDescendantClass} from '../ActionList/Item'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import styled from 'styled-components'
 import {get} from '../constants'
+import useScrollFlash from '../hooks/useScrollFlash'
 
 export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
   loading?: boolean
@@ -121,6 +122,8 @@ export function FilteredActionList({
     }
   }, [items])
 
+  useScrollFlash(scrollContainerRef)
+
   return (
     <Flex ref={containerRef} flexDirection="column" overflow="hidden">
       <StyledHeader>

src/hooks/useScrollFlash.ts

@@ -0,0 +1,21 @@
+import React, {useEffect} from 'react'
+/**
+ * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
+ * @param scrollContainerRef The ref of the scrollable content
+ */
+export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLElement>) {
+  // https://adxlv.computer/projects/flash-scrollers/
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
+    if (!scrollContainer) {
+      return
+    }
+    const currentScroll = scrollContainer.scrollTop
+    const maxScroll = scrollContainer.scrollHeight
+
+    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1
+
+    scrollContainer.scrollTop = altScroll
+    scrollContainer.scrollTop = currentScroll
+  }, [scrollContainerRef])
+}