From a57ae350111586382ea076a98a855ee7e3952202 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Fri, 8 Oct 2021 17:32:09 +0300
Subject: [PATCH] fix: Verify when null value should be undefined in Select
 (#17013)

* Check for null value

* Safety chek SelectControl and SelectAsyncControl
---
 .../controls/SelectAsyncControl/index.tsx     | 13 ++++++++++++-
 .../components/controls/SelectControl.jsx     | 19 ++++++++++++++++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx b/superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx
index 85230f7b919..ae65843ec23 100644
--- a/superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/SelectAsyncControl/index.tsx
@@ -71,6 +71,17 @@ const SelectAsyncControl = ({
     onChange(onChangeVal);
   };
 
+  const getValue = () => {
+    const currentValue =
+      value || (props.default !== undefined ? props.default : undefined);
+
+    // safety check - the value is intended to be undefined but null was used
+    if (currentValue === null && !options.find(o => o.value === null)) {
+      return undefined;
+    }
+    return currentValue;
+  };
+
   useEffect(() => {
     const onError = (response: Response) =>
       getClientErrorObject(response).then(e => {
@@ -93,7 +104,7 @@ const SelectAsyncControl = ({
     <Select
       allowClear={allowClear}
       ariaLabel={ariaLabel || t('Select ...')}
-      value={value || (props.default !== undefined ? props.default : undefined)}
+      value={getValue()}
       header={<ControlHeader {...props} />}
       mode={multi ? 'multiple' : 'single'}
       onChange={handleOnChange}
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 4d59808d4c2..29abfde4313 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -205,6 +205,21 @@ export default class SelectControl extends React.PureComponent {
       danger,
     };
 
+    const getValue = () => {
+      const currentValue =
+        value ||
+        (this.props.default !== undefined ? this.props.default : undefined);
+
+      // safety check - the value is intended to be undefined but null was used
+      if (
+        currentValue === null &&
+        !this.state.options.find(o => o.value === null)
+      ) {
+        return undefined;
+      }
+      return currentValue;
+    };
+
     const selectProps = {
       allowNewOptions: freeForm,
       autoFocus,
@@ -225,9 +240,7 @@ export default class SelectControl extends React.PureComponent {
       optionRenderer,
       options: this.state.options,
       placeholder,
-      value:
-        value ||
-        (this.props.default !== undefined ? this.props.default : undefined),
+      value: getValue(),
     };
 
     return (