From 5a11b456a5b6d4762165ee5f27530a0b4acf6b94 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Fri, 23 Jun 2023 11:01:21 +0300
Subject: [PATCH] [v10.0.x] Navigation: Fix toolbar actions flickering on
 mobile (#70564)

Navigation: Fix toolbar actions flickering on mobile (#70524)

* fix flickering overflow

* set everything to hidden by default

* extend intersectionobserver mock

(cherry picked from commit ff429c9af5b1232e03c6f9655dd3425907355d12)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 .../ToolbarButton/ToolbarButtonRow.tsx           |  6 +++---
 public/test/jest-setup.ts                        | 16 ++++++++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
index 0fcfce6d7cc..907e6eca67f 100644
--- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx
@@ -18,9 +18,9 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(
   ({ alignment = 'left', className, children, ...rest }, ref) => {
-    // null is a valid react child so we need to filter it out to prevent unnecessary padding
-    const childrenWithoutNull = React.Children.toArray(children).filter((child) => child !== null);
-    const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(true));
+    // null/undefined are valid react children so we need to filter them out to prevent unnecessary padding
+    const childrenWithoutNull = React.Children.toArray(children).filter((child) => child != null);
+    const [childVisibility, setChildVisibility] = useState<boolean[]>(Array(childrenWithoutNull.length).fill(false));
     const containerRef = useRef<HTMLDivElement>(null);
     const [showOverflowItems, setShowOverflowItems] = useState(false);
     const overflowRef = useRef<HTMLDivElement>(null);
diff --git a/public/test/jest-setup.ts b/public/test/jest-setup.ts
index 393269edcfa..6c3102dd328 100644
--- a/public/test/jest-setup.ts
+++ b/public/test/jest-setup.ts
@@ -50,12 +50,16 @@ angular.module('grafana.directives', []);
 angular.module('grafana.filters', []);
 angular.module('grafana.routes', ['ngRoute']);
 
-// Mock IntersectionObserver
-const mockIntersectionObserver = jest.fn().mockReturnValue({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-});
+// mock the intersection observer and just say everything is in view
+const mockIntersectionObserver = jest
+  .fn()
+  .mockImplementation((callback: (arg: IntersectionObserverEntry[]) => void) => ({
+    observe: jest.fn().mockImplementation((elem: HTMLElement) => {
+      callback([{ target: elem, isIntersecting: true }] as unknown as IntersectionObserverEntry[]);
+    }),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+  }));
 global.IntersectionObserver = mockIntersectionObserver;
 
 jest.mock('../app/core/core', () => ({