From eea6094beea20e8b7a7675f530b9d6c170974f31 Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Sun, 23 Jan 2022 22:26:32 +0800
Subject: [PATCH 1/3] fix(native-filters): values is not sorted when setting
 sort option

---
 .../components/Select/SelectFilterPlugin.tsx  | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 15d85eea9874f..23bc30dd93a09 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -266,17 +266,13 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     return undefined;
   }, [filterState.validateMessage, filterState.validateStatus]);
 
-  const options = useMemo(() => {
-    const options: { label: string; value: DataRecordValue }[] = [];
-    data.forEach(row => {
-      const [value] = groupby.map(col => row[col]);
-      options.push({
-        label: labelFormatter(value, datatype),
-        value,
-      });
-    });
-    return options;
-  }, [data, datatype, groupby, labelFormatter]);
+  const options = data.map(row => {
+    const [value] = groupby.map(col => row[col]);
+    return {
+      label: labelFormatter(value, datatype),
+      value,
+    };
+  });
 
   return (
     <FilterPluginStyle height={height} width={width}>
@@ -309,6 +305,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
           invertSelection={inverseSelection}
           // @ts-ignore
           options={options}
+          // keep the options in their original order
+          sortComparator={() => 0}
         />
       </StyledFormItem>
     </FilterPluginStyle>

From 545899e2020c3d3150bdf9a841df39758fa3ac68 Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Sun, 23 Jan 2022 22:36:06 +0800
Subject: [PATCH 2/3] fix: revert

---
 .../components/Select/SelectFilterPlugin.tsx   | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 23bc30dd93a09..8f945f774b628 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -266,13 +266,17 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     return undefined;
   }, [filterState.validateMessage, filterState.validateStatus]);
 
-  const options = data.map(row => {
-    const [value] = groupby.map(col => row[col]);
-    return {
-      label: labelFormatter(value, datatype),
-      value,
-    };
-  });
+  const options = useMemo(() => {
+    const options: { label: string; value: DataRecordValue }[] = [];
+    data.forEach(row => {
+      const [value] = groupby.map(col => row[col]);
+      options.push({
+        label: labelFormatter(value, datatype),
+        value,
+      });
+    });
+    return options;
+  }, [data, datatype, groupby, labelFormatter]);
 
   return (
     <FilterPluginStyle height={height} width={width}>

From 7ff09f55aa0efb0833094f10bcb5aa31996290f8 Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Wed, 26 Jan 2022 09:45:59 +0800
Subject: [PATCH 3/3] pass sortComparator

---
 .../components/Select/SelectFilterPlugin.tsx     | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 8f945f774b628..a34891e98cc97 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -30,11 +30,13 @@ import {
   t,
   tn,
 } from '@superset-ui/core';
+import { LabeledValue as AntdLabeledValue } from 'antd/lib/select';
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { Select } from 'src/components';
 import debounce from 'lodash/debounce';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { useImmerReducer } from 'use-immer';
+import { propertyComparator } from 'src/components/Select/Select';
 import { PluginFilterSelectProps, SelectValue } from './types';
 import { StyledFormItem, FilterPluginStyle, StatusMessage } from '../common';
 import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@@ -278,6 +280,17 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     return options;
   }, [data, datatype, groupby, labelFormatter]);
 
+  const sortComparator = useCallback(
+    (a: AntdLabeledValue, b: AntdLabeledValue) => {
+      const labelComparator = propertyComparator('label');
+      if (formData.sortAscending) {
+        return labelComparator(a, b);
+      }
+      return labelComparator(b, a);
+    },
+    [formData.sortAscending],
+  );
+
   return (
     <FilterPluginStyle height={height} width={width}>
       <StyledFormItem
@@ -309,8 +322,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
           invertSelection={inverseSelection}
           // @ts-ignore
           options={options}
-          // keep the options in their original order
-          sortComparator={() => 0}
+          sortComparator={sortComparator}
         />
       </StyledFormItem>
     </FilterPluginStyle>