From 55bab04497e0cda785098afd5a8baac59559be17 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Sat, 26 Sep 2020 00:41:48 -0400
Subject: [PATCH] SearchInput+IconGrid: scroll to top of grid on search change

When the debounced search query changes, scroll to the top of the grid
if the query is not the empty string. This has the same smooth behavior
as the scroll buttons, which is not currently available on WebKit.
---
 src/components/IconGrid/IconGrid.css       |  5 +++++
 src/components/IconGrid/IconGrid.tsx       |  1 +
 src/components/SearchInput/SearchInput.tsx | 12 +++++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css
index 324268a..7c8d783 100644
--- a/src/components/IconGrid/IconGrid.css
+++ b/src/components/IconGrid/IconGrid.css
@@ -155,3 +155,8 @@
   padding: 0 16px 4px;
   min-height: 80vh;
 }
+
+.beacon {
+  position: relative;
+  top: -64px;
+}
diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx
index 80d36a2..2d7b88c 100644
--- a/src/components/IconGrid/IconGrid.tsx
+++ b/src/components/IconGrid/IconGrid.tsx
@@ -39,6 +39,7 @@ const IconGrid: React.FC<IconGridProps> = () => {
         className="grid-container"
         style={{ backgroundColor: isDark ? "#35313D" : "" }}
       >
+        <i id="beacon" className="beacon" />
         <motion.div
           className="grid"
           initial="hidden"
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 9e62a0a..23238c5 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -13,7 +13,17 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   const [query, setQuery] = useRecoilState(searchQueryAtom);
   void query;
 
-  const [isReady] = useDebounce(() => setQuery(value), 250, [value]);
+  const [isReady] = useDebounce(
+    () => {
+      setQuery(value);
+      value &&
+        void document
+          .getElementById("beacon")
+          ?.scrollIntoView({ block: "start", behavior: "smooth" });
+    },
+    250,
+    [value]
+  );
 
   const handleCancelSearch = () => {
     setValue("");