You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/12/06 14:57:22 UTC
[superset] branch fix/dropdown-container-click-out updated: Use parentNode
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch fix/dropdown-container-click-out
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/fix/dropdown-container-click-out by this push:
new a2bce3ca31 Use parentNode
a2bce3ca31 is described below
commit a2bce3ca31c0b44a9ad075514a65d70b9a3f3b4e
Author: geido <di...@gmail.com>
AuthorDate: Tue Dec 6 16:57:04 2022 +0200
Use parentNode
---
.../src/components/DropdownContainer/index.tsx | 1 -
.../controls/ControlPopover/ControlPopover.tsx | 21 +++++++++++----------
.../controls/DateFilterControl/DateFilterLabel.tsx | 7 +++----
3 files changed, 14 insertions(+), 15 deletions(-)
diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index 1155f2980e..ed2295dafa 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -256,7 +256,6 @@ const DropdownContainer = forwardRef(
data-test="dropdown-content"
style={dropdownStyle}
ref={targetRef}
- className="dropdowncontainer"
>
{dropdownContent
? dropdownContent(overflowedItems)
diff --git a/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx b/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx
index 809117bdb1..2bbcde9938 100644
--- a/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx
+++ b/superset-frontend/src/explore/components/controls/ControlPopover/ControlPopover.tsx
@@ -29,7 +29,7 @@ export const getSectionContainerElement = () =>
const getElementYVisibilityRatioOnContainer = (node: HTMLElement) => {
const containerHeight = window?.innerHeight;
- const nodePositionInViewport = node.getBoundingClientRect()?.top;
+ const nodePositionInViewport = node?.getBoundingClientRect()?.top;
if (!containerHeight || !nodePositionInViewport) {
return 0;
}
@@ -45,6 +45,7 @@ const ControlPopover: React.FC<PopoverProps> = ({
getPopupContainer,
getVisibilityRatio = getElementYVisibilityRatioOnContainer,
visible: visibleProp,
+ destroyTooltipOnHide = false,
...props
}) => {
const triggerElementRef = useRef<HTMLElement>();
@@ -56,9 +57,9 @@ const ControlPopover: React.FC<PopoverProps> = ({
const calculatePlacement = useCallback(() => {
const visibilityRatio = getVisibilityRatio(triggerElementRef.current!);
- if (visibilityRatio < 0.35) {
+ if (visibilityRatio < 0.35 && placement !== 'rightTop') {
setPlacement('rightTop');
- } else if (visibilityRatio > 0.65) {
+ } else if (visibilityRatio > 0.65 && placement !== 'rightBottom') {
setPlacement('rightBottom');
} else {
setPlacement('right');
@@ -67,10 +68,6 @@ const ControlPopover: React.FC<PopoverProps> = ({
const changeContainerScrollStatus = useCallback(
visible => {
- if (triggerElementRef.current && visible) {
- calculatePlacement();
- }
-
const element = getSectionContainerElement();
if (element) {
element.style.setProperty(
@@ -86,9 +83,6 @@ const ControlPopover: React.FC<PopoverProps> = ({
const handleGetPopupContainer = useCallback(
(triggerNode: HTMLElement) => {
triggerElementRef.current = triggerNode;
- setTimeout(() => {
- calculatePlacement();
- }, 0);
return getPopupContainer?.(triggerNode) || document.body;
},
@@ -139,6 +133,12 @@ const ControlPopover: React.FC<PopoverProps> = ({
};
}, [handleDocumentKeyDownListener, visible]);
+ useEffect(() => {
+ if (visible) {
+ calculatePlacement();
+ }
+ }, [visible, calculatePlacement])
+
return (
<Popover
{...props}
@@ -147,6 +147,7 @@ const ControlPopover: React.FC<PopoverProps> = ({
placement={placement}
onVisibleChange={handleOnVisibleChange}
getPopupContainer={handleGetPopupContainer}
+ destroyTooltipOnHide={destroyTooltipOnHide}
/>
);
};
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index 97a591ab5f..214c01f307 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -357,13 +357,12 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
visible={show}
onVisibleChange={toggleOverlay}
overlayStyle={{ width: '600px' }}
- getPopupContainer={() =>
+ getPopupContainer={(triggerNode) =>
isOverflowingFilterBar
- ? (document.getElementsByClassName(
- 'dropdowncontainer',
- )[0] as HTMLElement)
+ ? triggerNode.parentNode as HTMLElement
: document.body
}
+ destroyTooltipOnHide
>
<Tooltip placement="top" title={tooltipTitle}>
<DateLabel