fix: Popover closes on change of dropdowns values (#12410)

superset-frontend/src/components/Select/OnPasteSelect.jsx

@@ -76,13 +76,7 @@ export default class OnPasteSelect extends React.Component {
 
   render() {
     const { selectWrap: SelectComponent, ...restProps } = this.props;
-    return (
-      <SelectComponent
-        {...restProps}
-        onPaste={this.onPaste}
-        menuPortalTarget={document.body}
-      />
-    );
+    return <SelectComponent {...restProps} onPaste={this.onPaste} />;
   }
 }
 
@@ -98,6 +92,7 @@ OnPasteSelect.propTypes = {
   value: PropTypes.any,
   isValidNewOption: PropTypes.func,
   noResultsText: PropTypes.string,
+  forceOverflow: PropTypes.bool,
 };
 OnPasteSelect.defaultProps = {
   separator: [',', '\n', '\t', ';'],

superset-frontend/src/components/Select/SupersetStyledSelect.tsx

@@ -91,6 +91,7 @@ export type SupersetStyledSelectProps<
   valueRenderedAsLabel?: boolean;
   // callback for paste event
   onPaste?: (e: SyntheticEvent) => void;
+  forceOverflow?: boolean;
   // for simplier theme overrides
   themeConfig?: PartialThemeConfig;
   stylesConfig?: PartialStylesConfig;
@@ -146,6 +147,7 @@ function styled<
       multi = false, // same as `isMulti`, used for backward compatibility
       clearable, // same as `isClearable`
       sortable = true, // whether to enable drag & drop sorting
+      forceOverflow, // whether the dropdown should be forcefully overflowing
 
       // react-select props
       className = DEFAULT_CLASS_NAME,
@@ -177,6 +179,7 @@ function styled<
         }
         return optionRenderer ? optionRenderer(option) : getOptionLabel(option);
       },
+
       ...restProps
     } = selectProps;
 
@@ -216,8 +219,6 @@ function styled<
       Object.assign(restProps, sortableContainerProps);
     }
 
-    stylesConfig.menuPortal = base => ({ ...base, zIndex: 9999 });
-
     // When values are rendered as labels, adjust valueContainer padding
     const valueRenderedAsLabel =
       valueRenderedAsLabel_ === undefined ? isMulti : valueRenderedAsLabel_;
@@ -243,6 +244,18 @@ function styled<
       });
     }
 
+    // handle forcing dropdown overflow
+    // use only when setting overflow:visible isn't possible on the container element
+    if (forceOverflow) {
+      Object.assign(restProps, {
+        closeMenuOnScroll: (e: Event) => {
+          const target = e.target as HTMLElement;
+          return target && !target.classList?.contains('Select__menu-list');
+        },
+        menuPosition: 'fixed',
+      });
+    }
+
     // Make sure always return StateManager for the refs.
     // To get the real `Select` component, keep tap into `obj.select`:
     //   - for normal <Select /> component: StateManager -> Select,

superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx

@@ -120,6 +120,7 @@ class RefreshIntervalModal extends React.PureComponent<
               options={options}
               value={{ value: refreshFrequency }}
               onChange={this.handleFrequencyChange}
+              forceOverflow
             />
             {showRefreshWarning && (
               <RefreshWarningContainer>

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

@@ -56,6 +56,7 @@ const propTypes = {
   menuPortalTarget: PropTypes.element,
   menuPosition: PropTypes.string,
   menuPlacement: PropTypes.string,
+  forceOverflow: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -218,7 +219,6 @@ export default class SelectControl extends React.PureComponent {
       filterOption,
       isLoading,
       menuPlacement,
-      menuPosition,
       name,
       noResultsText,
       onFocus,
@@ -227,6 +227,9 @@ export default class SelectControl extends React.PureComponent {
       value,
       valueKey,
       valueRenderer,
+      forceOverflow,
+      menuPortalTarget,
+      menuPosition,
     } = this.props;
 
     const optionsRemaining = this.optionsRemaining();
@@ -251,7 +254,8 @@ export default class SelectControl extends React.PureComponent {
       isMulti,
       labelKey: 'label',
       menuPlacement,
-      menuPortalTarget: document.body,
+      forceOverflow,
+      menuPortalTarget,
       menuPosition,
       name: `select-${name}`,
       noResultsText,

superset-frontend/src/visualizations/FilterBox/FilterBox.jsx

@@ -402,6 +402,7 @@ class FilterBox extends React.PureComponent {
             : CreatableSelect
         }
         noResultsText={t('No results found')}
+        forceOverflow
       />
     );
   }