fix: Null values on Explore filter (apache#19341)

(cherry picked from commit 65c204b)
preset-io · Mar 23, 2022 · 822993a · 822993a
1 parent 9e524aa
commit 822993a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 29 deletions.
diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
@@ -42,7 +42,7 @@ import Icons from 'src/components/Icons';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { rankedSearchCompare } from 'src/utils/rankedSearchCompare';
-import { getValue, hasOption } from './utils';
+import { getValue, hasOption, isObject } from './utils';
 
 const { Option } = AntdSelect;
 
@@ -384,37 +384,33 @@ const Select = (
   const hasCustomLabels = fullSelectOptions.some(opt => !!opt?.customLabel);
 
   const handleOnSelect = (
-    selectedValue: string | number | AntdLabeledValue,
+    selectedItem: string | number | AntdLabeledValue | undefined,
   ) => {
     if (isSingleMode) {
       setSelectValue(selectedValue);
     } else {
-      const currentSelected = selectValue
-        ? Array.isArray(selectValue)
-          ? selectValue
-          : [selectValue]
-        : [];
-      if (
-        typeof selectedValue === 'number' ||
-        typeof selectedValue === 'string'
-      ) {
-        setSelectValue([
-          ...(currentSelected as (string | number)[]),
-          selectedValue as string | number,
-        ]);
-      } else {
-        setSelectValue([
-          ...(currentSelected as AntdLabeledValue[]),
-          selectedValue as AntdLabeledValue,
-        ]);
-      }
+      setSelectValue(previousState => {
+        const array = ensureIsArray(previousState);
+        const isLabeledValue = isObject(selectedItem);
+        const value = isLabeledValue ? selectedItem.value : selectedItem;
+        // Tokenized values can contain duplicated values
+        if (!hasOption(value, array)) {
+          const result = [...array, selectedItem];
+          return isLabeledValue
+            ? (result as AntdLabeledValue[])
+            : (result as (string | number)[]);
+        }
+        return previousState;
+      });
     }
     setInputValue('');
   };
 
-  const handleOnDeselect = (value: string | number | AntdLabeledValue) => {
+  const handleOnDeselect = (
+    value: string | number | AntdLabeledValue | undefined,
+  ) => {
     if (Array.isArray(selectValue)) {
-      if (typeof value === 'number' || typeof value === 'string') {
+      if (typeof value === 'number' || typeof value === 'string' || !value) {
         const array = selectValue as (string | number)[];
         setSelectValue(array.filter(element => element !== value));
       } else {

diff --git a/superset-frontend/src/components/Select/utils.ts b/superset-frontend/src/components/Select/utils.ts
@@ -25,7 +25,7 @@ import {
   GroupedOptionsType,
 } from 'react-select';
 
-function isObject(value: unknown): value is Record<string, unknown> {
+export function isObject(value: unknown): value is Record<string, unknown> {
   return (
     value !== null &&
     typeof value === 'object' &&

diff --git a/...xplore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx b/...xplore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
@@ -406,11 +406,15 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
         {...operatorSelectProps}
       />
       {MULTI_OPERATORS.has(operatorId) || suggestions.length > 0 ? (
-        <SelectWithLabel
-          labelText={labelText}
-          options={suggestions}
-          {...comparatorSelectProps}
-        />
+        // We need to delay rendering the select because we can't pass a primitive value without options
+        // We can't pass value = [null] and options=[]
+        comparatorSelectProps.value && suggestions.length === 0 ? null : (
+          <SelectWithLabel
+            labelText={labelText}
+            options={suggestions}
+            {...comparatorSelectProps}
+          />
+        )
       ) : (
         <StyledInput
           data-test="adhoc-filter-simple-value"