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] }), {},