fix(explore): fix clearing select data causes popover dismiss (#14221)

* fix(explore): fix clearing select data causes popover dismiss

* wip: lint

* wip: lint

superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx

@@ -70,6 +70,8 @@ const propTypes = {
   addAnnotationLayer: PropTypes.func,
   removeAnnotationLayer: PropTypes.func,
   close: PropTypes.func,
+
+  onPopoverClear: PropTypes.func,
 };
 
 const defaultProps = {
@@ -93,6 +95,7 @@ const defaultProps = {
   addAnnotationLayer: () => {},
   removeAnnotationLayer: () => {},
   close: () => {},
+  onPopoverClear: () => {},
 };
 
 export default class AnnotationLayer extends React.PureComponent {
@@ -169,6 +172,7 @@ export default class AnnotationLayer extends React.PureComponent {
     );
     this.handleValue = this.handleValue.bind(this);
     this.isValidForm = this.isValidForm.bind(this);
+    this.popoverClearWrapper = this.popoverClearWrapper.bind(this);
   }
 
   componentDidMount() {
@@ -238,6 +242,15 @@ export default class AnnotationLayer extends React.PureComponent {
     return !errors.filter(x => x).length;
   }
 
+  popoverClearWrapper(value, actionMeta, callback) {
+    if (callback) {
+      callback(value);
+    }
+    if (actionMeta?.action === 'clear') {
+      this.props.onPopoverClear(true);
+    }
+  }
+
   handleAnnotationType(annotationType) {
     this.setState({
       annotationType,
@@ -409,7 +422,9 @@ export default class AnnotationLayer extends React.PureComponent {
           options={valueOptions}
           isLoading={isLoadingOptions}
           value={value}
-          onChange={this.handleValue}
+          onChange={(value, _, actionMeta) =>
+            this.popoverClearWrapper(value, actionMeta, this.handleValue)
+          }
           validationErrors={!value ? ['Mandatory'] : []}
           optionRenderer={this.renderOption}
         />
@@ -490,7 +505,11 @@ export default class AnnotationLayer extends React.PureComponent {
                 validationErrors={!intervalEndColumn ? ['Mandatory'] : []}
                 options={columns}
                 value={intervalEndColumn}
-                onChange={v => this.setState({ intervalEndColumn: v })}
+                onChange={(value, _, actionMeta) =>
+                  this.popoverClearWrapper(value, actionMeta, v =>
+                    this.setState({ intervalEndColumn: v }),
+                  )
+                }
               />
             )}
             <SelectControl
@@ -500,7 +519,11 @@ export default class AnnotationLayer extends React.PureComponent {
               description="Pick a title for you annotation."
               options={[{ value: '', label: 'None' }].concat(columns)}
               value={titleColumn}
-              onChange={v => this.setState({ titleColumn: v })}
+              onChange={(value, _, actionMeta) =>
+                this.popoverClearWrapper(value, actionMeta, v =>
+                  this.setState({ titleColumn: v }),
+                )
+              }
             />
             {annotationType !== ANNOTATION_TYPES.TIME_SERIES && (
               <SelectControl
@@ -512,7 +535,11 @@ export default class AnnotationLayer extends React.PureComponent {
                 multi
                 options={columns}
                 value={descriptionColumns}
-                onChange={v => this.setState({ descriptionColumns: v })}
+                onChange={(value, _, actionMeta) =>
+                  this.popoverClearWrapper(value, actionMeta, v =>
+                    this.setState({ descriptionColumns: v }),
+                  )
+                }
               />
             )}
             <div style={{ marginTop: '1rem' }}>
@@ -628,7 +655,11 @@ export default class AnnotationLayer extends React.PureComponent {
             { value: 'opacityHigh', label: '0.8' },
           ]}
           value={opacity}
-          onChange={v => this.setState({ opacity: v })}
+          onChange={(value, _, actionMeta) =>
+            this.popoverClearWrapper(value, actionMeta, v =>
+              this.setState({ opacity: v }),
+            )
+          }
         />
         <div>
           <ControlHeader label={t('Color')} />
@@ -734,7 +765,13 @@ export default class AnnotationLayer extends React.PureComponent {
                   name="annotation-source-type"
                   options={supportedSourceTypes}
                   value={sourceType}
-                  onChange={this.handleAnnotationSourceType}
+                  onChange={(value, _, actionMeta) =>
+                    this.popoverClearWrapper(
+                      value,
+                      actionMeta,
+                      this.handleAnnotationSourceType,
+                    )
+                  }
                   validationErrors={!sourceType ? [t('Mandatory')] : []}
                 />
               )}

superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx

@@ -59,10 +59,15 @@ const defaultProps = {
 class AnnotationLayerControl extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = { popoverVisible: {}, addedAnnotationIndex: null };
+    this.state = {
+      popoverVisible: {},
+      addedAnnotationIndex: null,
+      popoverClear: false,
+    };
     this.addAnnotationLayer = this.addAnnotationLayer.bind(this);
     this.removeAnnotationLayer = this.removeAnnotationLayer.bind(this);
     this.handleVisibleChange = this.handleVisibleChange.bind(this);
+    this.handlePopoverClear = this.handlePopoverClear.bind(this);
   }
 
   componentDidMount() {
@@ -100,9 +105,19 @@ class AnnotationLayerControl extends React.PureComponent {
   }
 
   handleVisibleChange(visible, popoverKey) {
-    this.setState(prevState => ({
-      popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
-    }));
+    if (!this.state.popoverClear) {
+      this.setState(prevState => ({
+        popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible },
+      }));
+    } else {
+      this.handlePopoverClear(false);
+    }
+  }
+
+  handlePopoverClear(popoverClear) {
+    this.setState({
+      popoverClear,
+    });
   }
 
   removeAnnotationLayer(annotation) {
@@ -128,6 +143,7 @@ class AnnotationLayerControl extends React.PureComponent {
             this.handleVisibleChange(false, popoverKey);
             this.setState({ addedAnnotationIndex: null });
           }}
+          onPopoverClear={this.handlePopoverClear}
         />
       </div>
     );

superset-frontend/src/explore/components/controls/SelectControl.jsx

@@ -105,7 +105,7 @@ export default class SelectControl extends React.PureComponent {
 
   // Beware: This is acting like an on-click instead of an on-change
   // (firing every time user chooses vs firing only if a new option is chosen).
-  onChange(opt) {
+  onChange(opt, actionMeta) {
     let optionValue = this.props.multi ? [] : null;
     if (opt) {
       if (this.props.multi) {
@@ -126,7 +126,7 @@ export default class SelectControl extends React.PureComponent {
       }
     }
     // will eventually call `exploreReducer`: SET_FIELD_VALUE
-    this.props.onChange(optionValue);
+    this.props.onChange(optionValue, [], actionMeta);
   }
 
   getSelectRef(instance) {