diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx index 178e32f568f20..9c0f1f1dd31c0 100644 --- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx +++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx @@ -19,6 +19,7 @@ import { AppSection, DataMask, + DataRecord, ensureIsArray, ExtraFormData, GenericDataType, @@ -27,7 +28,13 @@ import { t, tn, } from '@superset-ui/core'; -import React, { useCallback, useEffect, useReducer, useState } from 'react'; +import React, { + useCallback, + useEffect, + useMemo, + useReducer, + useState, +} from 'react'; import { Select } from 'src/common/components'; import debounce from 'lodash/debounce'; import { SLOW_DEBOUNCE } from 'src/constants'; @@ -101,6 +108,23 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { } = formData; const groupby = ensureIsArray(formData.groupby); const [col] = groupby; + const [selectedValues, setSelectedValues] = useState( + filterState.value, + ); + const sortedData = useMemo(() => { + const firstData: DataRecord[] = []; + const restData: DataRecord[] = []; + data.forEach(row => { + // @ts-ignore + if (selectedValues?.includes(row[col])) { + firstData.push(row); + } else { + restData.push(row); + } + }); + return [...firstData, ...restData]; + }, [col, selectedValues, data]); + const [isDropdownVisible, setIsDropdownVisible] = useState(false); const [currentSuggestionSearch, setCurrentSuggestionSearch] = useState(''); const [dataMask, dispatchDataMask] = useReducer(reducer, { filterState, @@ -126,6 +150,12 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { }); }; + useEffect(() => { + if (!isDropdownVisible) { + setSelectedValues(filterState.value); + } + }, [JSON.stringify(filterState.value)]); + const isDisabled = appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem; @@ -163,6 +193,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { const handleBlur = () => { clearSuggestionSearch(); unsetFocusedFilter(); + setSelectedValues(filterState.value); }; const datatype: GenericDataType = coltypeMap[col]; @@ -222,6 +253,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { onSearch={searchWrapper} onSelect={clearSuggestionSearch} onBlur={handleBlur} + onDropdownVisibleChange={setIsDropdownVisible} onFocus={setFocusedFilter} // @ts-ignore onChange={handleChange} @@ -229,7 +261,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { loading={isRefreshing} maxTagCount={5} > - {data.map(row => { + {sortedData.map(row => { const [value] = groupby.map(col => row[col]); return ( // @ts-ignore