mirror of https://github.com/apache/superset.git
fix: Popover closes on change of dropdowns values (#12410)
This commit is contained in:
parent
eec78560f2
commit
c1b8a46d01
|
@ -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', ';'],
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -120,6 +120,7 @@ class RefreshIntervalModal extends React.PureComponent<
|
|||
options={options}
|
||||
value={{ value: refreshFrequency }}
|
||||
onChange={this.handleFrequencyChange}
|
||||
forceOverflow
|
||||
/>
|
||||
{showRefreshWarning && (
|
||||
<RefreshWarningContainer>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -402,6 +402,7 @@ class FilterBox extends React.PureComponent {
|
|||
: CreatableSelect
|
||||
}
|
||||
noResultsText={t('No results found')}
|
||||
forceOverflow
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue