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 { 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 { label: ReactNode; @@ -150,6 +151,29 @@ export class Select extends React.Component { 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 ; + } + + return ( + + {({ index, style }) =>
{rChildren[index]}
} +
+ ); + }, }, };