diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 6f777efb252bb..8efcaea173f0c 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -72,6 +72,11 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
? firstItem
: initSelectValue,
);
+ const [currentSuggestionSearch, setCurrentSuggestionSearch] = useState('');
+
+ const clearSuggestionSearch = () => {
+ setCurrentSuggestionSearch('');
+ };
const [col] = groupby;
const datatype: GenericDataType = coltypeMap[col];
@@ -137,7 +142,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
]);
const placeholderText =
- (data || []).length === 0
+ data.length === 0
? t('No data')
: tn('%s option', '%s options', data.length, data.length);
return (
@@ -150,11 +155,14 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
showSearch={showSearch}
mode={multiSelect ? 'multiple' : undefined}
placeholder={placeholderText}
+ onSearch={setCurrentSuggestionSearch}
+ onSelect={clearSuggestionSearch}
+ onBlur={clearSuggestionSearch}
// @ts-ignore
onChange={handleChange}
ref={inputRef}
>
- {(data || []).map(row => {
+ {data.map(row => {
const [value] = groupby.map(col => row[col]);
return (
// @ts-ignore
@@ -163,6 +171,14 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
);
})}
+ {currentSuggestionSearch &&
+ !ensureIsArray(values).some(
+ suggestion => suggestion === currentSuggestionSearch,
+ ) && (
+
+ )}
);
diff --git a/superset-frontend/src/filters/components/Select/transformProps.ts b/superset-frontend/src/filters/components/Select/transformProps.ts
index 4c57e86ac2fea..c72239b2cb94a 100644
--- a/superset-frontend/src/filters/components/Select/transformProps.ts
+++ b/superset-frontend/src/filters/components/Select/transformProps.ts
@@ -35,7 +35,7 @@ export default function transformProps(
const newFormData = { ...DEFAULT_FORM_DATA, ...formData };
const { setDataMask = () => {} } = hooks;
const [queryData] = queriesData;
- const { colnames = [], coltypes = [], data } = queryData || [];
+ const { colnames = [], coltypes = [], data = [] } = queryData || {};
const coltypeMap: Record = colnames.reduce(
(accumulator, item, index) => ({ ...accumulator, [item]: coltypes[index] }),
{},