fix(Explore): Clear filter value when changing columns (#16871)

* Clear filter value onChange * Clear filter value on user change action
apache · Sep 30, 2021 · c8db435 · c8db435
1 parent 1a38ec6
commit c8db435
Showing 1 changed file with 42 additions and 33 deletions.
diff --git a/...xplore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx b/...xplore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
@@ -211,41 +211,12 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
     onComparatorChange,
   } = useSimpleTabFilterProps(props);
   const [suggestions, setSuggestions] = useState<Record<string, any>>([]);
+  const [comparator, setComparator] = useState(props.adhocFilter.comparator);
   const [
     loadingComparatorSuggestions,
     setLoadingComparatorSuggestions,
   ] = useState(false);
 
-  useEffect(() => {
-    const refreshComparatorSuggestions = () => {
-      const { datasource } = props;
-      const col = props.adhocFilter.subject;
-      const having = props.adhocFilter.clause === CLAUSES.HAVING;
-
-      if (col && datasource && datasource.filter_select && !having) {
-        const controller = new AbortController();
-        const { signal } = controller;
-        if (loadingComparatorSuggestions) {
-          controller.abort();
-        }
-        setLoadingComparatorSuggestions(true);
-        SupersetClient.get({
-          signal,
-          endpoint: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
-        })
-          .then(({ json }) => {
-            setSuggestions(json);
-            setLoadingComparatorSuggestions(false);
-          })
-          .catch(() => {
-            setSuggestions([]);
-            setLoadingComparatorSuggestions(false);
-          });
-      }
-    };
-    refreshComparatorSuggestions();
-  }, [props.adhocFilter.subject]);
-
   const onInputComparatorChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -257,7 +228,6 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
   );
 
   const getOptionsRemaining = () => {
-    const { comparator } = props.adhocFilter;
     // if select is multi/value is array, we show the options not selected
     const valuesFromSuggestionsLength = Array.isArray(comparator)
       ? comparator.filter(v => suggestions.includes(v)).length
@@ -270,13 +240,18 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
     return optionsRemaining ? placeholder : '';
   };
 
+  const handleSubjectChange = (subject: string) => {
+    setComparator(undefined);
+    onSubjectChange(subject);
+  };
+
   let columns = props.options;
-  const { subject, operator, comparator, operatorId } = props.adhocFilter;
+  const { subject, operator, operatorId } = props.adhocFilter;
 
   const subjectSelectProps = {
     ariaLabel: t('Select subject'),
     value: subject ?? undefined,
-    onChange: onSubjectChange,
+    onChange: handleSubjectChange,
     notFoundContent: t(
       'No such column found. To filter on a metric, try the Custom SQL tab.',
     ),
@@ -345,6 +320,40 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
     }
   `;
 
+  useEffect(() => {
+    const refreshComparatorSuggestions = () => {
+      const { datasource } = props;
+      const col = props.adhocFilter.subject;
+      const having = props.adhocFilter.clause === CLAUSES.HAVING;
+
+      if (col && datasource && datasource.filter_select && !having) {
+        const controller = new AbortController();
+        const { signal } = controller;
+        if (loadingComparatorSuggestions) {
+          controller.abort();
+        }
+        setLoadingComparatorSuggestions(true);
+        SupersetClient.get({
+          signal,
+          endpoint: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
+        })
+          .then(({ json }) => {
+            setSuggestions(json);
+            setLoadingComparatorSuggestions(false);
+          })
+          .catch(() => {
+            setSuggestions([]);
+            setLoadingComparatorSuggestions(false);
+          });
+      }
+    };
+    refreshComparatorSuggestions();
+  }, [props.adhocFilter.subject]);
+
+  useEffect(() => {
+    setComparator(props.adhocFilter.comparator);
+  }, [props.adhocFilter.comparator]);
+
   return (
     <>
       <Select