From fd028fd798c799b34536fc1d5209286f1da4eb5b Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Mon, 31 May 2021 09:01:12 +0200
Subject: [PATCH] DashboardLinks: Fix dropdown positioning (#34909)

---
 .../components/SubMenu/DashboardLinksDashboard.tsx       | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
index 576e33330b2..b783570759b 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useLayoutEffect } from 'react';
 import { Icon, Tooltip } from '@grafana/ui';
 import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
 import { getBackendSrv } from 'app/core/services/backend_srv';
@@ -17,9 +17,14 @@ interface Props {
 export const DashboardLinksDashboard: React.FC<Props> = (props) => {
   const { link, linkInfo } = props;
   const listRef = useRef<HTMLUListElement>(null);
+  const [dropdownCssClass, setDropdownCssClass] = useState('invisible');
   const [opened, setOpened] = useState(0);
   const resolvedLinks = useResolvedLinks(props, opened);
 
+  useLayoutEffect(() => {
+    setDropdownCssClass(getDropdownLocationCssClass(listRef.current));
+  }, [resolvedLinks]);
+
   if (link.asDropdown) {
     return (
       <LinkElement link={link} key="dashlinks-dropdown" aria-label={selectors.components.DashboardLinks.dropDown}>
@@ -33,7 +38,7 @@ export const DashboardLinksDashboard: React.FC<Props> = (props) => {
             <Icon name="bars" style={{ marginRight: '4px' }} />
             <span>{linkInfo.title}</span>
           </a>
-          <ul className={`dropdown-menu ${getDropdownLocationCssClass(listRef.current)}`} role="menu" ref={listRef}>
+          <ul className={`dropdown-menu ${dropdownCssClass}`} role="menu" ref={listRef}>
             {resolvedLinks.length > 0 &&
               resolvedLinks.map((resolvedLink, index) => {
                 return (