From adc3d24c211996ca5695c63dde64b72e9c5a3bbd Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Wed, 15 Sep 2021 07:33:43 -0300
Subject: [PATCH] fix: Ignore case and special keys when searching (#16706)

---
 .../src/components/Select/Select.test.tsx      | 12 ++++++++++++
 .../src/components/Select/Select.tsx           | 18 ++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/components/Select/Select.test.tsx b/superset-frontend/src/components/Select/Select.test.tsx
index cf26babc4..b9deaf76f 100644
--- a/superset-frontend/src/components/Select/Select.test.tsx
+++ b/superset-frontend/src/components/Select/Select.test.tsx
@@ -151,6 +151,18 @@ test('searches for label or value', async () => {
   expect(options[0]).toHaveTextContent(option.label);
 });
 
+test('ignores case when searching', async () => {
+  render(<Select {...defaultProps} />);
+  await type('george');
+  expect(await findSelectOption('George')).toBeInTheDocument();
+});
+
+test('ignores special keys when searching', async () => {
+  render(<Select {...defaultProps} />);
+  await type('{shift}');
+  expect(screen.queryByText(LOADING)).not.toBeInTheDocument();
+});
+
 test('searches for custom fields', async () => {
   render(<Select {...defaultProps} optionFilterProps={['label', 'gender']} />);
   await type('Liam');
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index cde4d9505..68d79e4a5 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -20,6 +20,7 @@ import React, {
   ReactElement,
   ReactNode,
   RefObject,
+  KeyboardEvent,
   UIEvent,
   useEffect,
   useMemo,
@@ -333,13 +334,18 @@ const Select = ({
 
   const handleData = (data: OptionsType) => {
     if (data && Array.isArray(data) && data.length) {
+      const dataValues = new Set();
+      data.forEach(option =>
+        dataValues.add(String(option.value).toLocaleLowerCase()),
+      );
+
       // merges with existing and creates unique options
       setSelectOptions(prevOptions => [
-        ...prevOptions,
-        ...data.filter(
-          newOpt =>
-            !prevOptions.find(prevOpt => prevOpt.value === newOpt.value),
+        ...prevOptions.filter(
+          previousOption =>
+            !dataValues.has(String(previousOption.value).toLocaleLowerCase()),
         ),
+        ...data,
       ]);
     }
   };
@@ -459,8 +465,8 @@ const Select = ({
     return error ? <Error error={error} /> : originNode;
   };
 
-  const onInputKeyDown = () => {
-    if (isAsync && !isTyping) {
+  const onInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key.length === 1 && isAsync && !isTyping) {
       setIsTyping(true);
     }
   };