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() {
|
render() {
|
||||||
const { selectWrap: SelectComponent, ...restProps } = this.props;
|
const { selectWrap: SelectComponent, ...restProps } = this.props;
|
||||||
return (
|
return <SelectComponent {...restProps} onPaste={this.onPaste} />;
|
||||||
<SelectComponent
|
|
||||||
{...restProps}
|
|
||||||
onPaste={this.onPaste}
|
|
||||||
menuPortalTarget={document.body}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -98,6 +92,7 @@ OnPasteSelect.propTypes = {
|
||||||
value: PropTypes.any,
|
value: PropTypes.any,
|
||||||
isValidNewOption: PropTypes.func,
|
isValidNewOption: PropTypes.func,
|
||||||
noResultsText: PropTypes.string,
|
noResultsText: PropTypes.string,
|
||||||
|
forceOverflow: PropTypes.bool,
|
||||||
};
|
};
|
||||||
OnPasteSelect.defaultProps = {
|
OnPasteSelect.defaultProps = {
|
||||||
separator: [',', '\n', '\t', ';'],
|
separator: [',', '\n', '\t', ';'],
|
||||||
|
|
|
@ -91,6 +91,7 @@ export type SupersetStyledSelectProps<
|
||||||
valueRenderedAsLabel?: boolean;
|
valueRenderedAsLabel?: boolean;
|
||||||
// callback for paste event
|
// callback for paste event
|
||||||
onPaste?: (e: SyntheticEvent) => void;
|
onPaste?: (e: SyntheticEvent) => void;
|
||||||
|
forceOverflow?: boolean;
|
||||||
// for simplier theme overrides
|
// for simplier theme overrides
|
||||||
themeConfig?: PartialThemeConfig;
|
themeConfig?: PartialThemeConfig;
|
||||||
stylesConfig?: PartialStylesConfig;
|
stylesConfig?: PartialStylesConfig;
|
||||||
|
@ -146,6 +147,7 @@ function styled<
|
||||||
multi = false, // same as `isMulti`, used for backward compatibility
|
multi = false, // same as `isMulti`, used for backward compatibility
|
||||||
clearable, // same as `isClearable`
|
clearable, // same as `isClearable`
|
||||||
sortable = true, // whether to enable drag & drop sorting
|
sortable = true, // whether to enable drag & drop sorting
|
||||||
|
forceOverflow, // whether the dropdown should be forcefully overflowing
|
||||||
|
|
||||||
// react-select props
|
// react-select props
|
||||||
className = DEFAULT_CLASS_NAME,
|
className = DEFAULT_CLASS_NAME,
|
||||||
|
@ -177,6 +179,7 @@ function styled<
|
||||||
}
|
}
|
||||||
return optionRenderer ? optionRenderer(option) : getOptionLabel(option);
|
return optionRenderer ? optionRenderer(option) : getOptionLabel(option);
|
||||||
},
|
},
|
||||||
|
|
||||||
...restProps
|
...restProps
|
||||||
} = selectProps;
|
} = selectProps;
|
||||||
|
|
||||||
|
@ -216,8 +219,6 @@ function styled<
|
||||||
Object.assign(restProps, sortableContainerProps);
|
Object.assign(restProps, sortableContainerProps);
|
||||||
}
|
}
|
||||||
|
|
||||||
stylesConfig.menuPortal = base => ({ ...base, zIndex: 9999 });
|
|
||||||
|
|
||||||
// When values are rendered as labels, adjust valueContainer padding
|
// When values are rendered as labels, adjust valueContainer padding
|
||||||
const valueRenderedAsLabel =
|
const valueRenderedAsLabel =
|
||||||
valueRenderedAsLabel_ === undefined ? isMulti : 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.
|
// Make sure always return StateManager for the refs.
|
||||||
// To get the real `Select` component, keep tap into `obj.select`:
|
// To get the real `Select` component, keep tap into `obj.select`:
|
||||||
// - for normal <Select /> component: StateManager -> Select,
|
// - for normal <Select /> component: StateManager -> Select,
|
||||||
|
|
|
@ -120,6 +120,7 @@ class RefreshIntervalModal extends React.PureComponent<
|
||||||
options={options}
|
options={options}
|
||||||
value={{ value: refreshFrequency }}
|
value={{ value: refreshFrequency }}
|
||||||
onChange={this.handleFrequencyChange}
|
onChange={this.handleFrequencyChange}
|
||||||
|
forceOverflow
|
||||||
/>
|
/>
|
||||||
{showRefreshWarning && (
|
{showRefreshWarning && (
|
||||||
<RefreshWarningContainer>
|
<RefreshWarningContainer>
|
||||||
|
|
|
@ -56,6 +56,7 @@ const propTypes = {
|
||||||
menuPortalTarget: PropTypes.element,
|
menuPortalTarget: PropTypes.element,
|
||||||
menuPosition: PropTypes.string,
|
menuPosition: PropTypes.string,
|
||||||
menuPlacement: PropTypes.string,
|
menuPlacement: PropTypes.string,
|
||||||
|
forceOverflow: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
|
@ -218,7 +219,6 @@ export default class SelectControl extends React.PureComponent {
|
||||||
filterOption,
|
filterOption,
|
||||||
isLoading,
|
isLoading,
|
||||||
menuPlacement,
|
menuPlacement,
|
||||||
menuPosition,
|
|
||||||
name,
|
name,
|
||||||
noResultsText,
|
noResultsText,
|
||||||
onFocus,
|
onFocus,
|
||||||
|
@ -227,6 +227,9 @@ export default class SelectControl extends React.PureComponent {
|
||||||
value,
|
value,
|
||||||
valueKey,
|
valueKey,
|
||||||
valueRenderer,
|
valueRenderer,
|
||||||
|
forceOverflow,
|
||||||
|
menuPortalTarget,
|
||||||
|
menuPosition,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const optionsRemaining = this.optionsRemaining();
|
const optionsRemaining = this.optionsRemaining();
|
||||||
|
@ -251,7 +254,8 @@ export default class SelectControl extends React.PureComponent {
|
||||||
isMulti,
|
isMulti,
|
||||||
labelKey: 'label',
|
labelKey: 'label',
|
||||||
menuPlacement,
|
menuPlacement,
|
||||||
menuPortalTarget: document.body,
|
forceOverflow,
|
||||||
|
menuPortalTarget,
|
||||||
menuPosition,
|
menuPosition,
|
||||||
name: `select-${name}`,
|
name: `select-${name}`,
|
||||||
noResultsText,
|
noResultsText,
|
||||||
|
|
|
@ -402,6 +402,7 @@ class FilterBox extends React.PureComponent {
|
||||||
: CreatableSelect
|
: CreatableSelect
|
||||||
}
|
}
|
||||||
noResultsText={t('No results found')}
|
noResultsText={t('No results found')}
|
||||||
|
forceOverflow
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue