Swap Downshift for Blueprint Suggest in grove navigator

next.config.js

@@ -18,8 +18,6 @@ module.exports = {
       process.env.NODE_ENV === 'production' ? false : true,
   },
 
-  reactStrictMode: true,
-
   typescript: {
     ignoreBuildErrors: true,
   },

public/styles/style.scss

@@ -184,18 +184,26 @@ header {
       }
     }
 
-    input {
-      border: 0;
+    .bp4-popover-target {
+      flex-grow: 1;
+    }
+
+    .bp4-input-group {
       height: 100%;
-      font-size: 100%;
-      padding: 0;
-      padding-left: 15px;
-      flex: 1;
-      outline: none;
-      -webkit-appearance: none;
-      border-radius: 0 10px 10px 0;
-      background-color: $light-gray4;
-      color: $pt-text-color;
+
+      input {
+        border: 0;
+        height: 100%;
+        font-size: 100%;
+        padding: 0;
+        padding-left: 15px;
+        flex: 1;
+        outline: none;
+        -webkit-appearance: none;
+        border-radius: 0 10px 10px 0;
+        background-color: $light-gray4;
+        color: $pt-text-color;
+      }
     }
   }
 }

src/components/Canvas/index.tsx

@@ -130,7 +130,7 @@ export default withApollo(({ blocks }: ICanvas) => {
         },
         mousewheel: {
           enabled: true,
-          modifiers: 'meta',
+          modifiers: 'cmd',
         },
         resizing: {
           enabled: true,

src/components/Header/components/Navigator.tsx

@@ -1,22 +1,26 @@
+import { MenuItem } from '@blueprintjs/core';
+import { Select, Suggest } from '@blueprintjs/select';
 import { useSelection } from '@context/selection-context';
 import { useUser } from '@context/user-context';
 import Downshift from 'downshift';
 import { useRouter } from 'next/router';
 import React, { useRef, useState } from 'react';
 import { GlobalHotKeys } from 'react-hotkeys';
 import KeyMaps from '~/src/constants/KeyMaps';
+import { Ervell } from '~/src/types';
 
 const GrovesNavigator = ({ initialSelection }) => {
   const router = useRouter();
 
   const { channels, index } = useUser();
-  const { selectedChannel, setSelectedChannel } = useSelection();
+  const { selectedChannel, setSelectedChannel, channelID } = useSelection();
 
   const allUserChannels = index.flatMap((channelSet) =>
     channelSet.channels.flatMap((c) => c),
   );
 
-  const [inputItems, setInputItems] = useState(allUserChannels);
+  const [inputItems, setInputItems] =
+    useState<Ervell.ChannelMetadata[]>(allUserChannels);
 
   const inputRef = useRef(null);
 
@@ -27,14 +31,28 @@ const GrovesNavigator = ({ initialSelection }) => {
 
   const keyHandlers = { FOCUS_NAVIGATOR: (e) => handleFocusInput(e) };
 
-  const selectInputContents = () => {
-    inputRef.current && inputRef.current.select();
-  };
-
   return (
-    <>
+    <div className="grove-navigation">
       <GlobalHotKeys handlers={keyHandlers} keyMap={KeyMaps} />
-      <Downshift
+      <Suggest
+        className="flex"
+        popoverProps={{
+          fill: true,
+          minimal: true,
+          popoverClassName: 'max-h-72 overflow-scroll',
+        }}
+        fill={true}
+        noResults={<MenuItem disabled={true} text="No results." />}
+        items={inputItems}
+        itemRenderer={(item) => <MenuItem text={item.title} key={item.id} />}
+        onItemSelect={(item) => {
+          console.log(item);
+        }}
+        defaultSelectedItem={
+          inputItems.filter((item) => item.id === channelID)[0]
+        }
+      />
+      {/* <Downshift
         onInputValueChange={(inputValue) => {
           setInputItems(
             allUserChannels.filter((item) =>
@@ -125,8 +143,8 @@ const GrovesNavigator = ({ initialSelection }) => {
             </div>
           </>
         )}
-      </Downshift>
-    </>
+      </Downshift> */}
+    </div>
   );
 };
 

src/context/selection-context.tsx

@@ -32,7 +32,7 @@ export const SelectionProvider = withApollo((props): any => {
 
   const channelID = getChannelID();
 
-  let initialSelection = null;
+  let initialSelection = selectedChannel;
 
   return (
     <SelectionContext.Provider