diff --git a/superset-frontend/src/components/Select/Select.stories.tsx b/superset-frontend/src/components/Select/Select.stories.tsx
index 5526c2fc2ac01..9b38586467ab5 100644
--- a/superset-frontend/src/components/Select/Select.stories.tsx
+++ b/superset-frontend/src/components/Select/Select.stories.tsx
@@ -16,9 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React, { ReactNode, useState, useCallback } from 'react';
+import React, { ReactNode, useState, useCallback, useRef } from 'react';
+import Button from 'src/components/Button';
import ControlHeader from 'src/explore/components/ControlHeader';
-import Select, { SelectProps, OptionsTypePage, OptionsType } from './Select';
+import Select, {
+ SelectProps,
+ OptionsTypePage,
+ OptionsType,
+ SelectRef,
+} from './Select';
export default {
title: 'Select',
@@ -387,6 +393,7 @@ export const AsyncSelect = ({
responseTime: number;
}) => {
const [requests, setRequests] = useState([]);
+ const ref = useRef(null);
const getResults = (username?: string) => {
let results: { label: string; value: string }[] = [];
@@ -458,6 +465,7 @@ export const AsyncSelect = ({
>
))}
+
>
);
};
diff --git a/superset-frontend/src/components/Select/Select.test.tsx b/superset-frontend/src/components/Select/Select.test.tsx
index 37a39204369f6..97aec1c081fad 100644
--- a/superset-frontend/src/components/Select/Select.test.tsx
+++ b/superset-frontend/src/components/Select/Select.test.tsx
@@ -16,10 +16,11 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React from 'react';
+import React, { RefObject } from 'react';
import { render, screen, waitFor, within } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { Select } from 'src/components';
+import { SelectRef } from './Select';
const ARIA_LABEL = 'Test';
const NEW_OPTION = 'Kyle';
@@ -813,6 +814,21 @@ test('async - fires a new request if all values have not been fetched', async ()
expect(mock).toHaveBeenCalledTimes(2);
});
+test('async - requests the options again after clearing the cache', async () => {
+ const ref: RefObject = { current: null };
+ const mock = jest.fn(loadOptions);
+ const pageSize = OPTIONS.length;
+ render(
+ ,
+ );
+ await open();
+ expect(mock).toHaveBeenCalledTimes(1);
+ ref.current?.clearCache();
+ await type('{esc}');
+ await open();
+ expect(mock).toHaveBeenCalledTimes(2);
+});
+
/*
TODO: Add tests that require scroll interaction. Needs further investigation.
- Fetches more data when scrolling and more data is available
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index 3624f4a2b1574..591fe350ce634 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -27,6 +27,7 @@ import React, {
useState,
useRef,
useCallback,
+ useImperativeHandle,
} from 'react';
import { ensureIsArray, styled, t } from '@superset-ui/core';
import AntdSelect, {
@@ -81,6 +82,8 @@ export type OptionsPagePromise = (
pageSize: number,
) => Promise;
+export type SelectRef = HTMLInputElement & { clearCache: () => void };
+
export interface SelectProps extends PickedSelectProps {
/**
* It enables the user to create new options.
@@ -315,7 +318,7 @@ const Select = (
value,
...props
}: SelectProps,
- ref: RefObject,
+ ref: RefObject,
) => {
const isAsync = typeof options === 'function';
const isSingleMode = mode === 'single';
@@ -678,6 +681,17 @@ const Select = (
}
}, [isLoading, loading]);
+ const clearCache = () => fetchedQueries.current.clear();
+
+ useImperativeHandle(
+ ref,
+ () => ({
+ ...(ref.current as HTMLInputElement),
+ clearCache,
+ }),
+ [ref],
+ );
+
return (
{header}
diff --git a/superset-frontend/src/filters/components/GroupBy/types.ts b/superset-frontend/src/filters/components/GroupBy/types.ts
index 5775edaa2f332..1e6d756497784 100644
--- a/superset-frontend/src/filters/components/GroupBy/types.ts
+++ b/superset-frontend/src/filters/components/GroupBy/types.ts
@@ -23,6 +23,7 @@ import {
QueryFormData,
} from '@superset-ui/core';
import { RefObject } from 'react';
+import { SelectRef } from 'src/components/Select/Select';
import { PluginFilterHooks, PluginFilterStylesProps } from '../types';
interface PluginFilterGroupByCustomizeProps {
@@ -40,7 +41,7 @@ export type PluginFilterGroupByProps = PluginFilterStylesProps & {
data: DataRecord[];
filterState: FilterState;
formData: PluginFilterGroupByQueryFormData;
- inputRef: RefObject;
+ inputRef: RefObject;
} & PluginFilterHooks;
export const DEFAULT_FORM_DATA: PluginFilterGroupByCustomizeProps = {
diff --git a/superset-frontend/src/filters/components/TimeColumn/types.ts b/superset-frontend/src/filters/components/TimeColumn/types.ts
index 95b1e5edfdc93..bc12cb87169ce 100644
--- a/superset-frontend/src/filters/components/TimeColumn/types.ts
+++ b/superset-frontend/src/filters/components/TimeColumn/types.ts
@@ -23,6 +23,7 @@ import {
QueryFormData,
} from '@superset-ui/core';
import { RefObject } from 'react';
+import { SelectRef } from 'src/components/Select/Select';
import { PluginFilterHooks, PluginFilterStylesProps } from '../types';
interface PluginFilterTimeColumnCustomizeProps {
@@ -39,7 +40,7 @@ export type PluginFilterTimeColumnProps = PluginFilterStylesProps & {
data: DataRecord[];
filterState: FilterState;
formData: PluginFilterTimeColumnQueryFormData;
- inputRef: RefObject;
+ inputRef: RefObject;
} & PluginFilterHooks;
export const DEFAULT_FORM_DATA: PluginFilterTimeColumnCustomizeProps = {
diff --git a/superset-frontend/src/filters/components/TimeGrain/types.ts b/superset-frontend/src/filters/components/TimeGrain/types.ts
index 3dfa9a99d8dc5..64a7166573572 100644
--- a/superset-frontend/src/filters/components/TimeGrain/types.ts
+++ b/superset-frontend/src/filters/components/TimeGrain/types.ts
@@ -18,6 +18,7 @@
*/
import { FilterState, QueryFormData, DataRecord } from '@superset-ui/core';
import { RefObject } from 'react';
+import { SelectRef } from 'src/components/Select/Select';
import { PluginFilterHooks, PluginFilterStylesProps } from '../types';
interface PluginFilterTimeGrainCustomizeProps {
@@ -33,7 +34,7 @@ export type PluginFilterTimeGrainProps = PluginFilterStylesProps & {
data: DataRecord[];
filterState: FilterState;
formData: PluginFilterTimeGrainQueryFormData;
- inputRef: RefObject;
+ inputRef: RefObject;
} & PluginFilterHooks;
export const DEFAULT_FORM_DATA: PluginFilterTimeGrainCustomizeProps = {