feat(native-filters): sort selected values on blur (#14842)

* feat(native-filters): sort selected values on blur

* remove new icons

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<string>(formData.groupby);
   const [col] = groupby;
+  const [selectedValues, setSelectedValues] = useState<SelectValue>(
+    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<DataMaskReducer>(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