From 3f6b4ea516ae806fe45f151ad52ac0958ec1715b Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Thu, 31 Dec 2020 21:53:49 -0700
Subject: [PATCH] improve custom select component [skip ci]

---
 hyperglass/ui/components/select/select.tsx | 17 ++++++++---------
 hyperglass/ui/components/select/types.ts   |  4 ++--
 hyperglass/ui/types/common.ts              |  4 ++++
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/hyperglass/ui/components/select/select.tsx b/hyperglass/ui/components/select/select.tsx
index 915a444..9e38f0d 100644
--- a/hyperglass/ui/components/select/select.tsx
+++ b/hyperglass/ui/components/select/select.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
 import ReactSelect from 'react-select';
-import { Box, useDisclosure } from '@chakra-ui/react';
+import { chakra, useDisclosure } from '@chakra-ui/react';
 import { useColorMode } from '~/context';
 import {
   useRSTheme,
@@ -18,15 +18,15 @@ import {
 } from './styles';
 
 import type { TSelectOption } from '~/types';
-import type { TSelectBase, TSelectContext, TBoxAsReactSelect } from './types';
+import type { TSelectBase, TSelectContext, TReactSelectChakra } from './types';
 
 const SelectContext = createContext<TSelectContext>(Object());
 export const useSelectContext = () => useContext(SelectContext);
 
-const ReactSelectAsBox = (props: TBoxAsReactSelect) => <Box as={ReactSelect} {...props} />;
+const ReactSelectChakra = chakra<typeof ReactSelect, TReactSelectChakra>(ReactSelect);
 
 export const Select = (props: TSelectBase) => {
-  const { ctl, options, multi, onSelect, isError = false, ...rest } = props;
+  const { options, multi, onSelect, isError = false, ...rest } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const { colorMode } = useColorMode();
@@ -37,7 +37,7 @@ export const Select = (props: TSelectBase) => {
     isOpen,
   ]);
 
-  const handleChange = (changed: TSelectOption | TSelectOption[]) => {
+  const defaultOnChange = (changed: TSelectOption | TSelectOption[]) => {
     if (!Array.isArray(changed)) {
       changed = [changed];
     }
@@ -54,15 +54,14 @@ export const Select = (props: TSelectBase) => {
 
   return (
     <SelectContext.Provider value={selectContext}>
-      <ReactSelectAsBox
-        onChange={handleChange}
+      <ReactSelectChakra
+        onChange={defaultOnChange}
         onMenuClose={onClose}
         onMenuOpen={onOpen}
+        isClearable={true}
         options={options}
-        as={ReactSelect}
         isMulti={multi}
         theme={rsTheme}
-        ref={ctl}
         styles={{
           menuPortal,
           multiValue,
diff --git a/hyperglass/ui/components/select/types.ts b/hyperglass/ui/components/select/types.ts
index dbacc93..f97b4ff 100644
--- a/hyperglass/ui/components/select/types.ts
+++ b/hyperglass/ui/components/select/types.ts
@@ -18,10 +18,10 @@ export interface TSelectState {
 
 export type TOptions = Array<TSelectOptionGroup | TSelectOption>;
 
-export type TBoxAsReactSelect = Omit<IReactSelect, 'isMulti' | 'onSelect' | 'onChange'> &
+export type TReactSelectChakra = Omit<IReactSelect, 'isMulti' | 'onSelect' | 'onChange'> &
   Omit<BoxProps, 'onChange' | 'onSelect'>;
 
-export interface TSelectBase extends TBoxAsReactSelect {
+export interface TSelectBase extends TReactSelectChakra {
   name: string;
   multi?: boolean;
   isError?: boolean;
diff --git a/hyperglass/ui/types/common.ts b/hyperglass/ui/types/common.ts
index 79d3b0c..5efd424 100644
--- a/hyperglass/ui/types/common.ts
+++ b/hyperglass/ui/types/common.ts
@@ -1,3 +1,5 @@
+import { State } from '@hookstate/core';
+
 export type TSelectOptionBase = {
   label: string;
   value: string;
@@ -8,6 +10,8 @@ export type TSelectOption = TSelectOptionBase | null;
 
 export type TSelectOptionMulti = TSelectOptionBase[] | null;
 
+export type TSelectOptionState = State<TSelectOption>;
+
 export type TSelectOptionGroup = {
   label: string;
   options: TSelectOption[];