fix(dashboards): Fix issue assignee dropdown when few issues exist in…

static/app/components/assigneeSelectorDropdown.tsx

@@ -76,6 +76,10 @@ interface AssigneeSelectorDropdownProps {
    * Additional styles to apply to the dropdown
    */
   className?: string;
+  /**
+   * If true, places the assignee dropdown in document body
+   */
+  createPortalOnDropdown?: boolean;
   /**
    * Optional list of members to populate the dropdown with.
    */
@@ -214,6 +218,7 @@ export default function AssigneeSelectorDropdown({
   sizeLimit = 150,
   trigger,
   additionalMenuFooterItems,
+  createPortalOnDropdown = false,
 }: AssigneeSelectorDropdownProps) {
   const memberLists = useLegacyStore(MemberListStore);
   const sessionUser = useUser();
@@ -581,6 +586,7 @@ export default function AssigneeSelectorDropdown({
         menuFooter={footerInviteButton}
         sizeLimit={sizeLimit}
         sizeLimitMessage="Use search to find more users and teams..."
+        createPortalOnDropdown={createPortalOnDropdown}
       />
     </AssigneeWrapper>
   );

static/app/components/core/compactSelect/control.tsx

@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import {createPortal} from 'react-dom';
 import isPropValid from '@emotion/is-prop-valid';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -112,6 +113,10 @@ export interface ControlProps
    * If true, there will be a "Clear" button in the menu header.
    */
   clearable?: boolean;
+  /**
+   * If true, places the dropdown in the document body instead.
+   */
+  createPortalOnDropdown?: boolean;
   /**
    * Whether to disable the search input's filter function (applicable only when
    * `searchable` is true). This is useful for implementing custom search behaviors,
@@ -242,6 +247,7 @@ export function Control({
   menuBody,
   menuFooter,
   onOpenChange,
+  createPortalOnDropdown,
 
   // Select props
   size = 'md',
@@ -504,6 +510,67 @@ export function Control({
   }, [saveSelectedOptions, overlayState, overlayIsOpen, search]);
 
   const theme = useTheme();
+  const dropdown = (
+    <StyledPositionWrapper
+      zIndex={theme.zIndex?.tooltip}
+      visible={overlayIsOpen}
+      {...overlayProps}
+    >
+      <StyledOverlay
+        width={menuWidth ?? menuFullWidth}
+        minWidth={overlayProps.style!.minWidth}
+        maxWidth={maxMenuWidth}
+        maxHeight={overlayProps.style!.maxHeight}
+        maxHeightProp={maxMenuHeight}
+        data-menu-has-header={!!menuTitle || clearable}
+        data-menu-has-search={searchable}
+        data-menu-has-footer={!!menuFooter}
+      >
+        <FocusScope contain={overlayIsOpen}>
+          {(menuTitle || menuHeaderTrailingItems || (clearable && showClearButton)) && (
+            <MenuHeader size={size}>
+              <MenuTitle>{menuTitle}</MenuTitle>
+              <MenuHeaderTrailingItems>
+                {loading && <StyledLoadingIndicator size={12} />}
+                {typeof menuHeaderTrailingItems === 'function'
+                  ? menuHeaderTrailingItems({closeOverlay: overlayState.close})
+                  : menuHeaderTrailingItems}
+                {clearable && showClearButton && (
+                  <ClearButton onClick={clearSelection} size="zero" borderless>
+                    {t('Clear')}
+                  </ClearButton>
+                )}
+              </MenuHeaderTrailingItems>
+            </MenuHeader>
+          )}
+          {searchable && (
+            <SearchInput
+              ref={searchRef}
+              placeholder={searchPlaceholder}
+              value={searchInputValue}
+              onFocus={onSearchFocus}
+              onBlur={onSearchBlur}
+              onChange={e => updateSearch(e.target.value)}
+              size="xs"
+              {...searchKeyboardProps}
+            />
+          )}
+          {typeof menuBody === 'function'
+            ? menuBody({closeOverlay: overlayState.close})
+            : menuBody}
+          {!hideOptions && <OptionsWrap>{children}</OptionsWrap>}
+          {menuFooter && (
+            <MenuFooter>
+              {typeof menuFooter === 'function'
+                ? menuFooter({closeOverlay: overlayState.close})
+                : menuFooter}
+            </MenuFooter>
+          )}
+        </FocusScope>
+      </StyledOverlay>
+    </StyledPositionWrapper>
+  );
+
   return (
     <SelectContext value={contextValue}>
       <ControlWrap {...wrapperProps}>
@@ -519,66 +586,7 @@ export function Control({
             {triggerLabel}
           </DropdownButton>
         )}
-        <StyledPositionWrapper
-          zIndex={theme.zIndex?.tooltip}
-          visible={overlayIsOpen}
-          {...overlayProps}
-        >
-          <StyledOverlay
-            width={menuWidth ?? menuFullWidth}
-            minWidth={overlayProps.style!.minWidth}
-            maxWidth={maxMenuWidth}
-            maxHeight={overlayProps.style!.maxHeight}
-            maxHeightProp={maxMenuHeight}
-            data-menu-has-header={!!menuTitle || clearable}
-            data-menu-has-search={searchable}
-            data-menu-has-footer={!!menuFooter}
-          >
-            <FocusScope contain={overlayIsOpen}>
-              {(menuTitle ||
-                menuHeaderTrailingItems ||
-                (clearable && showClearButton)) && (
-                <MenuHeader size={size}>
-                  <MenuTitle>{menuTitle}</MenuTitle>
-                  <MenuHeaderTrailingItems>
-                    {loading && <StyledLoadingIndicator size={12} />}
-                    {typeof menuHeaderTrailingItems === 'function'
-                      ? menuHeaderTrailingItems({closeOverlay: overlayState.close})
-                      : menuHeaderTrailingItems}
-                    {clearable && showClearButton && (
-                      <ClearButton onClick={clearSelection} size="zero" borderless>
-                        {t('Clear')}
-                      </ClearButton>
-                    )}
-                  </MenuHeaderTrailingItems>
-                </MenuHeader>
-              )}
-              {searchable && (
-                <SearchInput
-                  ref={searchRef}
-                  placeholder={searchPlaceholder}
-                  value={searchInputValue}
-                  onFocus={onSearchFocus}
-                  onBlur={onSearchBlur}
-                  onChange={e => updateSearch(e.target.value)}
-                  size="xs"
-                  {...searchKeyboardProps}
-                />
-              )}
-              {typeof menuBody === 'function'
-                ? menuBody({closeOverlay: overlayState.close})
-                : menuBody}
-              {!hideOptions && <OptionsWrap>{children}</OptionsWrap>}
-              {menuFooter && (
-                <MenuFooter>
-                  {typeof menuFooter === 'function'
-                    ? menuFooter({closeOverlay: overlayState.close})
-                    : menuFooter}
-                </MenuFooter>
-              )}
-            </FocusScope>
-          </StyledOverlay>
-        </StyledPositionWrapper>
+        {createPortalOnDropdown ? createPortal(dropdown, document.body) : dropdown}
       </ControlWrap>
     </SelectContext>
   );
@@ -692,9 +700,10 @@ const StyledOverlay = styled(Overlay, {
 
 const StyledPositionWrapper = styled(PositionWrapper, {
   shouldForwardProp: prop => isPropValid(prop),
-})<{visible?: boolean}>`
+})<{visible?: boolean; zIndex?: number}>`
   min-width: 100%;
   display: ${p => (p.visible ? 'block' : 'none')};
+  ${p => (p.zIndex ? `z-index: ${p.zIndex} !important;` : '')}
 `;
 
 const OptionsWrap = styled('div')`

static/app/components/core/compactSelect/index.tsx

@@ -21,6 +21,7 @@ export type {SelectOption, SelectOptionOrSection, SelectSection, SelectKey};
 
 interface BaseSelectProps<Value extends SelectKey> extends ControlProps {
   options: Array<SelectOptionOrSection<Value>>;
+  createPortalOnDropdown?: boolean;
 }
 
 export interface SingleSelectProps<Value extends SelectKey>
@@ -70,6 +71,7 @@ function CompactSelect<Value extends SelectKey>({
   sizeLimitMessage,
 
   // Control props
+  createPortalOnDropdown = false,
   grid,
   disabled,
   emptyMessage,
@@ -114,6 +116,7 @@ function CompactSelect<Value extends SelectKey>({
       disabled={controlDisabled}
       grid={grid}
       size={size}
+      createPortalOnDropdown={createPortalOnDropdown}
     >
       <List
         {...listProps}

static/app/components/group/assigneeSelector.tsx

@@ -21,6 +21,7 @@ interface AssigneeSelectorProps {
   group: Group;
   handleAssigneeChange: (assignedActor: AssignableEntity | null) => void;
   additionalMenuFooterItems?: React.ReactNode;
+  createPortalOnDropdown?: boolean;
   memberList?: User[];
   owners?: Array<Omit<SuggestedAssignee, 'assignee'>>;
   showLabel?: boolean;
@@ -81,6 +82,7 @@ export function AssigneeSelector({
   owners,
   additionalMenuFooterItems,
   showLabel = false,
+  createPortalOnDropdown = false,
 }: AssigneeSelectorProps) {
   const theme = useTheme();
 
@@ -116,6 +118,7 @@ export function AssigneeSelector({
         </StyledDropdownButton>
       )}
       additionalMenuFooterItems={additionalMenuFooterItems}
+      createPortalOnDropdown={createPortalOnDropdown}
     />
   );
 }

static/app/utils/dashboards/issueAssignee.tsx

@@ -32,6 +32,7 @@ export function IssueAssignee({groupId}: IssueAssigneeProps) {
       memberList={memberListState.members}
       assigneeLoading={assigneeLoading}
       handleAssigneeChange={handleAssigneeChange}
+      createPortalOnDropdown
     />
   );
 }

static/app/utils/useOverlay.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef, useState} from 'react';
+import {useLayoutEffect, useMemo, useRef, useState} from 'react';
 import type {PopperProps} from 'react-popper';
 import {usePopper} from 'react-popper';
 import type {Modifier} from '@popperjs/core';
@@ -309,6 +309,15 @@ function useOverlay({
     overlayRef
   );
 
+  // Force popper update when elements mount/update
+  useLayoutEffect(() => {
+    if (!openState.isOpen || !popperUpdate) {
+      return undefined;
+    }
+    popperUpdate();
+    return () => {};
+  }, [openState.isOpen, triggerElement, overlayElement, popperUpdate]);
+
   return {
     isOpen: openState.isOpen,
     state: openState,