From fbce635806a8e9f595888e898ca1be66d42aef92 Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Wed, 2 Jun 2021 11:21:00 -0500
Subject: [PATCH 1/4] implement scrollflash into SelectPanel

---
 src/FilteredActionList/FilteredActionList.tsx |  3 +++
 src/hooks/useScrollFlash.ts                   | 27 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/hooks/useScrollFlash.ts

diff --git a/src/FilteredActionList/FilteredActionList.tsx b/src/FilteredActionList/FilteredActionList.tsx
index 1d48f150e71..b75590b9328 100644
--- a/src/FilteredActionList/FilteredActionList.tsx
+++ b/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>
diff --git a/src/hooks/useScrollFlash.ts b/src/hooks/useScrollFlash.ts
new file mode 100644
index 00000000000..0a0cd07ab5a
--- /dev/null
+++ b/src/hooks/useScrollFlash.ts
@@ -0,0 +1,27 @@
+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 = (() => {
+      if (currentScroll < 1 || currentScroll < maxScroll) return currentScroll + 1
+      else return currentScroll - 1
+    })()
+
+    scrollContainer.scrollTop = altScroll
+    scrollContainer.scrollTop = currentScroll
+
+    const flashScrollersEvent = new Event('flashScrollers')
+    scrollContainer.dispatchEvent(flashScrollersEvent)
+  }, [scrollContainerRef])
+}

From 1a32c81b9eb75586332be2296b28ff2b25cf4ac5 Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Thu, 3 Jun 2021 15:40:11 -0500
Subject: [PATCH 2/4] Update src/hooks/useScrollFlash.ts

Co-authored-by: Clay Miller <clay@smockle.com>
---
 src/hooks/useScrollFlash.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useScrollFlash.ts b/src/hooks/useScrollFlash.ts
index 0a0cd07ab5a..b0f14280dfe 100644
--- a/src/hooks/useScrollFlash.ts
+++ b/src/hooks/useScrollFlash.ts
@@ -13,7 +13,7 @@ export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLE
     const currentScroll = scrollContainer.scrollTop
     const maxScroll = scrollContainer.scrollHeight
 
-    const altScroll = (() => {
+    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
       if (currentScroll < 1 || currentScroll < maxScroll) return currentScroll + 1
       else return currentScroll - 1
     })()

From ffb2731ac286327b6a33e4fdb4c6386489e6bb8c Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Thu, 3 Jun 2021 15:48:26 -0500
Subject: [PATCH 3/4] revise useScrollFlash

---
 src/hooks/useScrollFlash.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/hooks/useScrollFlash.ts b/src/hooks/useScrollFlash.ts
index b0f14280dfe..12b5bc47920 100644
--- a/src/hooks/useScrollFlash.ts
+++ b/src/hooks/useScrollFlash.ts
@@ -13,10 +13,7 @@ export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLE
     const currentScroll = scrollContainer.scrollTop
     const maxScroll = scrollContainer.scrollHeight
 
-    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1;
-      if (currentScroll < 1 || currentScroll < maxScroll) return currentScroll + 1
-      else return currentScroll - 1
-    })()
+    const altScroll = currentScroll < Math.min(1, maxScroll) ? currentScroll + 1 : currentScroll - 1
 
     scrollContainer.scrollTop = altScroll
     scrollContainer.scrollTop = currentScroll

From bc4b4b1ba4bdcbe5240de7216c9db172901ca5ab Mon Sep 17 00:00:00 2001
From: Van Anderson <van.m.anderson@gmail.com>
Date: Mon, 7 Jun 2021 09:21:35 -0500
Subject: [PATCH 4/4] don't dispatch scrollFlash event

---
 src/hooks/useScrollFlash.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/hooks/useScrollFlash.ts b/src/hooks/useScrollFlash.ts
index 12b5bc47920..c79300a6ab3 100644
--- a/src/hooks/useScrollFlash.ts
+++ b/src/hooks/useScrollFlash.ts
@@ -17,8 +17,5 @@ export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLE
 
     scrollContainer.scrollTop = altScroll
     scrollContainer.scrollTop = currentScroll
-
-    const flashScrollersEvent = new Event('flashScrollers')
-    scrollContainer.dispatchEvent(flashScrollersEvent)
   }, [scrollContainerRef])
 }