From 262b769d19a072514102e27b8f7b46bcb6395b93 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Wed, 28 Jun 2023 16:29:29 +0200
Subject: [PATCH] fix(native-filters): Infinite load when filter with default
 first value is out of scope in horizontal bar (#24542)

---
 .../components/DropdownContainer/index.tsx    |  7 ++++-
 .../src/components/Popover/Popover.test.tsx   |  5 ++++
 .../src/components/Popover/Popover.tsx        | 28 +++++++++++++++++++
 .../src/components/Popover/index.tsx          |  4 +--
 .../FilterControls/FilterControls.tsx         |  1 +
 5 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 superset-frontend/src/components/Popover/Popover.tsx

diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index f2504c66f..79f2b4a30 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -104,6 +104,10 @@ export interface DropdownContainerProps {
    * Main container additional style properties.
    */
   style?: CSSProperties;
+  /**
+   * Force render popover content before it's first opened
+   */
+  forceRender?: boolean;
 }
 
 export type Ref = HTMLDivElement & { open: () => void };
@@ -120,6 +124,7 @@ const DropdownContainer = forwardRef(
       dropdownTriggerIcon,
       dropdownTriggerText = t('More'),
       dropdownTriggerTooltip = null,
+      forceRender,
       style,
     }: DropdownContainerProps,
     outerRef: RefObject<Ref>,
@@ -364,7 +369,7 @@ const DropdownContainer = forwardRef(
               visible={popoverVisible}
               onVisibleChange={visible => setPopoverVisible(visible)}
               placement="bottom"
-              destroyTooltipOnHide
+              forceRender={forceRender}
             >
               <Tooltip title={dropdownTriggerTooltip}>
                 <Button
diff --git a/superset-frontend/src/components/Popover/Popover.test.tsx b/superset-frontend/src/components/Popover/Popover.test.tsx
index bb9b21c86..95e519654 100644
--- a/superset-frontend/src/components/Popover/Popover.test.tsx
+++ b/superset-frontend/src/components/Popover/Popover.test.tsx
@@ -47,6 +47,11 @@ test('it should not render a title or content when not visible', () => {
   expect(title).not.toBeInTheDocument();
 });
 
+test('it should render content when not visible but forceRender=true', () => {
+  render(<Popover content="Content sample" forceRender />);
+  expect(screen.getByText('Content sample')).toBeInTheDocument();
+});
+
 test('renders with icon child', async () => {
   render(
     <Popover content="Content sample" title="Popover title">
diff --git a/superset-frontend/src/components/Popover/Popover.tsx b/superset-frontend/src/components/Popover/Popover.tsx
new file mode 100644
index 000000000..d0828ece2
--- /dev/null
+++ b/superset-frontend/src/components/Popover/Popover.tsx
@@ -0,0 +1,28 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Popover as AntdPopover } from 'antd';
+import type { PopoverProps as AntdPopoverProps } from 'antd/lib/popover';
+
+export interface PopoverProps extends AntdPopoverProps {
+  forceRender?: boolean;
+}
+
+export const Popover = (props: PopoverProps) => <AntdPopover {...props} />;
diff --git a/superset-frontend/src/components/Popover/index.tsx b/superset-frontend/src/components/Popover/index.tsx
index acde76c1e..d147a75ed 100644
--- a/superset-frontend/src/components/Popover/index.tsx
+++ b/superset-frontend/src/components/Popover/index.tsx
@@ -16,11 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Popover } from 'antd';
-
 export type { PopoverProps } from 'antd/lib/popover';
 export type { TooltipPlacement } from 'antd/lib/tooltip';
 
 // Eventually Popover can be wrapped and customized in this file
 // for now we're just redirecting
-export default Popover;
+export { Popover as default } from './Popover';
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
index e3459610b..629ec75cb 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -277,6 +277,7 @@ const FilterControls: FC<FilterControlsProps> = ({
               )
             : undefined
         }
+        forceRender={hasRequiredFirst}
         ref={popoverRef}
         onOverflowingStateChange={({ overflowed: nextOverflowedIds }) => {
           if (