From 46d1a5c6737586467c0706c76e90dbc134f59575 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 14 Dec 2021 16:33:04 -0500
Subject: [PATCH] Convert <Select /> to use <FixedSizeList /> when having lots
 of options

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../+namespaces/namespace-select-filter.tsx   |  1 -
 src/renderer/components/select/select.scss    |  2 +-
 src/renderer/components/select/select.tsx     | 26 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/+namespaces/namespace-select-filter.tsx b/src/renderer/components/+namespaces/namespace-select-filter.tsx
index 929530aa97..a528a42488 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.tsx
+++ b/src/renderer/components/+namespaces/namespace-select-filter.tsx
@@ -178,7 +178,6 @@ export class NamespaceSelectFilter extends React.Component<SelectProps> {
           showAllNamespacesOption={true}
           closeMenuOnSelect={false}
           controlShouldRenderValue={false}
-          placeholder={""}
           onChange={this.onChange}
           onBlur={this.reset}
           formatOptionLabel={this.formatOptionLabel}
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index 8f5a3fa0e9..904421fb24 100644
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@@ -91,7 +91,7 @@ html {
     &__menu {
       background: var(--select-menu-bgc);
       box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
-      width: max-content;
+      width: 400px;
       min-width: 100%;
 
       &-list {
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index 553dcb988f..99254800dc 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -31,8 +31,9 @@ import Creatable, { CreatableProps } from "react-select/creatable";
 
 import { ThemeStore } from "../../theme.store";
 import { boundMethod, cssNames } from "../../utils";
+import { FixedSizeList } from "react-window";
 
-const { Menu } = components;
+const { Menu, MenuList } = components;
 
 export interface GroupSelectOption<T extends SelectOption = SelectOption> {
   label: ReactNode;
@@ -150,6 +151,29 @@ export class Select extends React.Component<SelectProps> {
             className={cssNames(menuClass, this.themeClass, props.className)}
           />
         ),
+        MenuList: props => {
+          const height = 35;
+          const { options, children, maxHeight, getValue } = props;
+          const [value] = getValue();
+          const initialOffset = options.indexOf(value) * height;
+          const rChildren = React.Children.toArray(children);
+
+          if (rChildren.length < 200) {
+            return <MenuList {...props} />;
+          }
+
+          return (
+            <FixedSizeList
+              height={maxHeight}
+              itemCount={rChildren.length}
+              itemSize={30}
+              initialScrollOffset={initialOffset}
+              width="100%"
+            >
+              {({ index, style }) => <div style={style}>{rChildren[index]}</div>}
+            </FixedSizeList>
+          );
+        },
       },
     };