From c1b8a46d015d31ed035a2547f5655d82c0e9126a Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Thu, 14 Jan 2021 19:33:20 +0100
Subject: [PATCH] fix: Popover closes on change of dropdowns values (#12410)
---
.../src/components/Select/OnPasteSelect.jsx | 9 ++-------
.../components/Select/SupersetStyledSelect.tsx | 17 +++++++++++++++--
.../components/RefreshIntervalModal.tsx | 1 +
.../components/controls/SelectControl.jsx | 8 ++++++--
.../src/visualizations/FilterBox/FilterBox.jsx | 1 +
5 files changed, 25 insertions(+), 11 deletions(-)
diff --git a/superset-frontend/src/components/Select/OnPasteSelect.jsx b/superset-frontend/src/components/Select/OnPasteSelect.jsx
index 5fcd597858..e178a0a4c0 100644
--- a/superset-frontend/src/components/Select/OnPasteSelect.jsx
+++ b/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 (
-
- );
+ return ;
}
}
@@ -98,6 +92,7 @@ OnPasteSelect.propTypes = {
value: PropTypes.any,
isValidNewOption: PropTypes.func,
noResultsText: PropTypes.string,
+ forceOverflow: PropTypes.bool,
};
OnPasteSelect.defaultProps = {
separator: [',', '\n', '\t', ';'],
diff --git a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx
index fdbf5e2426..20afd0ee2d 100644
--- a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx
+++ b/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 component: StateManager -> Select,
diff --git a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
index 0f77f00fbf..9be1dd79a8 100644
--- a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
+++ b/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 && (
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index 62e0826232..799ded9b4d 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/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,
diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
index 9fea2c367f..e87ebb944b 100644
--- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
+++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
@@ -402,6 +402,7 @@ class FilterBox extends React.PureComponent {
: CreatableSelect
}
noResultsText={t('No results found')}
+ forceOverflow
/>
);
}