[superset] branch master updated: fix: Ignore case and special keys when searching (#16706)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new adc3d24  fix: Ignore case and special keys when searching (#16706)
adc3d24 is described below

commit adc3d24c211996ca5695c63dde64b72e9c5a3bbd
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Wed Sep 15 07:33:43 2021 -0300

    fix: Ignore case and special keys when searching (#16706)
---
 .../src/components/Select/Select.test.tsx              | 12 ++++++++++++
 superset-frontend/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 cf26bab..b9deaf7 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 cde4d95..68d79e4 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);
     }
   };