[superset] branch master updated: fix: Duplicated numeric values in Select (#21480)

[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 b739e27f6d fix: Duplicated numeric values in Select (#21480)
b739e27f6d is described below

commit b739e27f6dc4b159d766074e3e353a5546d00adb
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Fri Sep 16 08:39:27 2022 -0300

    fix: Duplicated numeric values in Select (#21480)
---
 .../src/components/Select/AsyncSelect.test.tsx       | 20 ++++++++++++++++++++
 .../src/components/Select/Select.test.tsx            | 17 +++++++++++++++++
 superset-frontend/src/components/Select/utils.tsx    | 16 +++++++++++-----
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/components/Select/AsyncSelect.test.tsx b/superset-frontend/src/components/Select/AsyncSelect.test.tsx
index e5569f1be0..b11dcde017 100644
--- a/superset-frontend/src/components/Select/AsyncSelect.test.tsx
+++ b/superset-frontend/src/components/Select/AsyncSelect.test.tsx
@@ -98,6 +98,11 @@ const findSelectOption = (text: string) =>
     within(getElementByClassName('.rc-virtual-list')).getByText(text),
   );
 
+const querySelectOption = (text: string) =>
+  waitFor(() =>
+    within(getElementByClassName('.rc-virtual-list')).queryByText(text),
+  );
+
 const findAllSelectOptions = () =>
   waitFor(() => getElementsByClassName('.ant-select-item-option-content'));
 
@@ -736,6 +741,21 @@ test('renders a helper text when one is provided', async () => {
   expect(screen.queryByText(helperText)).toBeInTheDocument();
 });
 
+test('finds an element with a numeric value and does not duplicate the options', async () => {
+  const options = jest.fn(async () => ({
+    data: [
+      { label: 'a', value: 11 },
+      { label: 'b', value: 12 },
+    ],
+    totalCount: 2,
+  }));
+  render(<AsyncSelect {...defaultProps} options={options} allowNewOptions />);
+  await open();
+  await type('11');
+  expect(await findSelectOption('a')).toBeInTheDocument();
+  expect(await querySelectOption('11')).not.toBeInTheDocument();
+});
+
 /*
  TODO: Add tests that require scroll interaction. Needs further investigation.
  - Fetches more data when scrolling and more data is available
diff --git a/superset-frontend/src/components/Select/Select.test.tsx b/superset-frontend/src/components/Select/Select.test.tsx
index 0ee1f409e4..06f5f7b8e5 100644
--- a/superset-frontend/src/components/Select/Select.test.tsx
+++ b/superset-frontend/src/components/Select/Select.test.tsx
@@ -77,6 +77,11 @@ const findSelectOption = (text: string) =>
     within(getElementByClassName('.rc-virtual-list')).getByText(text),
   );
 
+const querySelectOption = (text: string) =>
+  waitFor(() =>
+    within(getElementByClassName('.rc-virtual-list')).queryByText(text),
+  );
+
 const findAllSelectOptions = () =>
   waitFor(() => getElementsByClassName('.ant-select-item-option-content'));
 
@@ -549,6 +554,18 @@ test('renders a helper text when one is provided', async () => {
   expect(screen.queryByText(helperText)).toBeInTheDocument();
 });
 
+test('finds an element with a numeric value and does not duplicate the options', async () => {
+  const options = [
+    { label: 'a', value: 11 },
+    { label: 'b', value: 12 },
+  ];
+  render(<Select {...defaultProps} options={options} allowNewOptions />);
+  await open();
+  await type('11');
+  expect(await findSelectOption('a')).toBeInTheDocument();
+  expect(await querySelectOption('11')).not.toBeInTheDocument();
+});
+
 /*
  TODO: Add tests that require scroll interaction. Needs further investigation.
  - Fetches more data when scrolling and more data is available
diff --git a/superset-frontend/src/components/Select/utils.tsx b/superset-frontend/src/components/Select/utils.tsx
index 9916ef07e2..27a97ac8bd 100644
--- a/superset-frontend/src/components/Select/utils.tsx
+++ b/superset-frontend/src/components/Select/utils.tsx
@@ -96,20 +96,26 @@ export function getValue(
   return isLabeledValue(option) ? option.value : option;
 }
 
-type LabeledValue<V> = { label?: ReactNode; value?: V };
+type V = string | number | null | undefined;
 
-export function hasOption<V>(
+type LabeledValue = { label?: ReactNode; value?: V };
+
+export function hasOption(
   value: V,
-  options?: V | LabeledValue<V> | (V | LabeledValue<V>)[],
+  options?: V | LabeledValue | (V | LabeledValue)[],
   checkLabel = false,
 ): boolean {
   const optionsArray = ensureIsArray(options);
+  // When comparing the values we use the equality
+  // operator to automatically convert different types
   return (
     optionsArray.find(
       x =>
-        x === value ||
+        // eslint-disable-next-line eqeqeq
+        x == value ||
         (isObject(x) &&
-          (('value' in x && x.value === value) ||
+          // eslint-disable-next-line eqeqeq
+          (('value' in x && x.value == value) ||
             (checkLabel && 'label' in x && x.label === value))),
     ) !== undefined
   );