From d099f5ed4ad6f5b553c7e3eedbc34cf5ad55eae7 Mon Sep 17 00:00:00 2001
From: smileydev <47900232+prosdev0107@users.noreply.github.com>
Date: Thu, 17 Mar 2022 13:04:03 -0400
Subject: [PATCH] fix(select): make to consider the case sensitive in case of
 d3 format selector (#19159)

---
 .../src/shared-controls/index.tsx             | 58 ++++++++++++-------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
index 81cd563c80..a5de8eff91 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/index.tsx
@@ -94,6 +94,11 @@ type Control = {
   default?: unknown;
 };
 
+type SelectDefaultOption = {
+  label: string;
+  value: string;
+};
+
 const groupByControl: SharedControlConfig<'SelectControl', ColumnMeta> = {
   type: 'SelectControl',
   label: t('Group by'),
@@ -430,29 +435,36 @@ const size: SharedControlConfig<'MetricsControl'> = {
   default: null,
 };
 
-const y_axis_format: SharedControlConfig<'SelectControl'> = {
-  type: 'SelectControl',
-  freeForm: true,
-  label: t('Y Axis Format'),
-  renderTrigger: true,
-  default: DEFAULT_NUMBER_FORMAT,
-  choices: D3_FORMAT_OPTIONS,
-  description: D3_FORMAT_DOCS,
-  mapStateToProps: state => {
-    const showWarning = state.controls?.comparison_type?.value === 'percentage';
-    return {
-      warning: showWarning
-        ? t(
-            'When `Calculation type` is set to "Percentage change", the Y ' +
-              'Axis Format is forced to `.1%`',
-          )
-        : null,
-      disabled: showWarning,
-    };
-  },
-};
+const y_axis_format: SharedControlConfig<'SelectControl', SelectDefaultOption> =
+  {
+    type: 'SelectControl',
+    freeForm: true,
+    label: t('Y Axis Format'),
+    renderTrigger: true,
+    default: DEFAULT_NUMBER_FORMAT,
+    choices: D3_FORMAT_OPTIONS,
+    description: D3_FORMAT_DOCS,
+    filterOption: ({ data: option }, search) =>
+      option.label.includes(search) || option.value.includes(search),
+    mapStateToProps: state => {
+      const showWarning =
+        state.controls?.comparison_type?.value === 'percentage';
+      return {
+        warning: showWarning
+          ? t(
+              'When `Calculation type` is set to "Percentage change", the Y ' +
+                'Axis Format is forced to `.1%`',
+            )
+          : null,
+        disabled: showWarning,
+      };
+    },
+  };
 
-const x_axis_time_format: SharedControlConfig<'SelectControl'> = {
+const x_axis_time_format: SharedControlConfig<
+  'SelectControl',
+  SelectDefaultOption
+> = {
   type: 'SelectControl',
   freeForm: true,
   label: t('Time format'),
@@ -460,6 +472,8 @@ const x_axis_time_format: SharedControlConfig<'SelectControl'> = {
   default: DEFAULT_TIME_FORMAT,
   choices: D3_TIME_FORMAT_OPTIONS,
   description: D3_TIME_FORMAT_DOCS,
+  filterOption: ({ data: option }, search) =>
+    option.label.includes(search) || option.value.includes(search),
 };
 
 const adhoc_filters: SharedControlConfig<'AdhocFilterControl'> = {