fix(ui): Tooltip gets stuck in issue list display dropdown (#26976)

static/app/components/dropdownControl.tsx

@@ -5,6 +5,7 @@ import DropdownBubble from 'app/components/dropdownBubble';
 import DropdownButton from 'app/components/dropdownButton';
 import DropdownMenu, {GetActorPropsFn, GetMenuPropsFn} from 'app/components/dropdownMenu';
 import MenuItem from 'app/components/menuItem';
+import Tooltip from 'app/components/tooltip';
 
 type ButtonPriority = React.ComponentProps<typeof DropdownButton>['priority'];
 
@@ -52,6 +53,10 @@ type Props = DefaultProps & {
    * Props to pass to DropdownButton
    */
   buttonProps?: React.ComponentProps<typeof DropdownButton>;
+  /**
+   * Tooltip to show on button when dropdown isn't open
+   */
+  buttonTooltipTitle?: string | null;
   /**
    * This makes the dropdown menu blend (e.g. corners are not rounded) with its
    * actor (opener) component
@@ -75,12 +80,30 @@ class DropdownControl extends React.Component<Props> {
   };
 
   renderButton(isOpen: boolean, getActorProps: GetActorPropsFn) {
-    const {label, button, buttonProps, priority} = this.props;
+    const {label, button, buttonProps, buttonTooltipTitle, priority} = this.props;
 
     if (button) {
       return button({isOpen, getActorProps});
     }
 
+    if (buttonTooltipTitle && !isOpen) {
+      return (
+        <Tooltip
+          containerDisplayMode="inline-flex"
+          position="top"
+          title={buttonTooltipTitle}
+        >
+          <StyledDropdownButton
+            priority={priority}
+            {...getActorProps(buttonProps)}
+            isOpen={isOpen}
+          >
+            {label}
+          </StyledDropdownButton>
+        </Tooltip>
+      );
+    }
+
     return (
       <StyledDropdownButton
         priority={priority}

static/app/views/issueList/displayOptions.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import DropdownButton from 'app/components/dropdownButton';
 import DropdownControl, {DropdownItem} from 'app/components/dropdownControl';
 import Tooltip from 'app/components/tooltip';
 import {t} from 'app/locale';
@@ -58,25 +57,15 @@ const IssueListDisplayOptions = ({
 
   return (
     <DropdownControl
-      button={({isOpen, getActorProps}) => (
-        <Tooltip
-          containerDisplayMode="inline-flex"
-          position="top"
-          title={t(
-            'This shows the event count as a percent of sessions in the same time period.'
-          )}
-          disabled={display !== IssueDisplayOptions.SESSIONS || isOpen}
-        >
-          <StyledDropdownButton
-            {...getActorProps({prefix: t('Display')} as React.ComponentProps<
-              typeof DropdownButton
-            >)}
-            isOpen={isOpen}
-          >
-            {getDisplayLabel(display)}
-          </StyledDropdownButton>
-        </Tooltip>
-      )}
+      buttonProps={{prefix: t('Display')}}
+      buttonTooltipTitle={
+        display === IssueDisplayOptions.SESSIONS
+          ? t(
+              'This shows the event count as a percent of sessions in the same time period.'
+            )
+          : null
+      }
+      label={getDisplayLabel(display)}
     >
       <React.Fragment>
         {getMenuItem(IssueDisplayOptions.EVENTS)}
@@ -86,11 +75,6 @@ const IssueListDisplayOptions = ({
   );
 };
 
-const StyledDropdownButton = styled(DropdownButton)`
-  z-index: ${p => p.theme.zIndex.dropdownAutocomplete.actor};
-  white-space: nowrap;
-`;
-
 const StyledTooltip = styled(Tooltip)`
   width: 100%;
 `;