fix: Ignore case and special keys when searching (#16706)

apache · Sep 15, 2021 · adc3d24 · adc3d24
1 parent b0ac5d1
commit adc3d24
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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);
     }
   };