diff --git a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx index 2728f43799..317a7b73fa 100644 --- a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx +++ b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { SyntheticEvent, MutableRefObject } from 'react'; +import React, { SyntheticEvent, MutableRefObject, ComponentType } from 'react'; import { merge } from 'lodash'; import BasicSelect, { OptionTypeBase, @@ -39,6 +39,7 @@ import { SortableContainerProps, } from 'react-sortable-hoc'; import arrayMove from 'array-move'; +import { Props as SelectProps } from 'react-select/src/Select'; import { WindowedSelectComponentType, WindowedSelectProps, @@ -93,9 +94,11 @@ export type SupersetStyledSelectProps< function styled< OptionType extends OptionTypeBase, - SelectComponentType extends WindowedSelectComponentType< + SelectComponentType extends + | WindowedSelectComponentType + | ComponentType> = WindowedSelectComponentType< OptionType - > = WindowedSelectComponentType + > >(SelectComponent: SelectComponentType) { type SelectProps = SupersetStyledSelectProps; type Components = SelectComponents; @@ -287,7 +290,5 @@ export const Select = styled(WindowedSelect); export const AsyncSelect = styled(WindowedAsyncSelect); export const CreatableSelect = styled(WindowedCreatableSelect); export const AsyncCreatableSelect = styled(WindowedAsyncCreatableSelect); -// Wrap with async pagination (infinite scroll). Cannot use windowed since options are appended dynamically which causes focus jumping -// @ts-ignore export const PaginatedSelect = withAsyncPaginate(styled(BasicSelect)); export default Select; diff --git a/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx b/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx index ef7d94a673..356c8a646c 100644 --- a/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx +++ b/superset-frontend/src/components/Select/WindowedSelect/WindowedMenuList.tsx @@ -22,6 +22,7 @@ import React, { Component, FunctionComponent, RefObject, + ReactElement, } from 'react'; import { ListChildComponentProps, @@ -53,10 +54,15 @@ export type WindowedMenuListProps = { * If may also be `Component>[]` but we are not supporting * grouped options just yet. */ + +type MenuListPropsChildren = + | Component>[] + | ReactElement[]; + export type MenuListProps< OptionType extends OptionTypeBase > = MenuListComponentProps & { - children: Component>[]; + children: MenuListPropsChildren; // theme is not present with built-in @types/react-select, but is actually // available via CommonProps. theme?: ThemeConfig; @@ -68,7 +74,7 @@ const DEFAULT_OPTION_HEIGHT = 30; /** * Get the index of the last selected option. */ -function getLastSelected(children: Component[]) { +function getLastSelected(children: MenuListPropsChildren) { return Array.isArray(children) ? children.findIndex( ({ props: { isFocused = false } = {} }) => isFocused, diff --git a/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx b/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx index 44b7d01928..804ba2daf3 100644 --- a/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx +++ b/superset-frontend/src/components/Select/WindowedSelect/windowed.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React, { ComponentType, FunctionComponent } from 'react'; +import React, { ComponentType, FunctionComponent, ReactElement } from 'react'; import Select, { Props as SelectProps, OptionTypeBase, @@ -47,8 +47,11 @@ export function MenuList({ }) { const { windowThreshold = DEFAULT_WINDOW_THRESHOLD } = props.selectProps; if (Array.isArray(children) && children.length > windowThreshold) { - // @ts-ignore - return {children}; + return ( + + {children as ReactElement[]} + + ); } return {children}; }