fix(compactSelect): Fix scrolling issue due to live-announcer

package.json

@@ -25,7 +25,7 @@
     "@popperjs/core": "^2.11.5",
     "@react-aria/button": "^3.3.4",
     "@react-aria/focus": "^3.5.0",
-    "@react-aria/gridlist": "^3.1.2",
+    "@react-aria/gridlist": "^3.4.0",
     "@react-aria/interactions": "^3.7.0",
     "@react-aria/listbox": "^3.5.1",
     "@react-aria/menu": "^3.3.0",

static/app/components/compactSelect/list.tsx

@@ -232,7 +232,7 @@ function List<Value extends React.Key>({
 
     while (
       firstKey &&
-      (listState.collection.getItem(firstKey).type === 'section' ||
+      (listState.collection.getItem(firstKey)?.type === 'section' ||
         listState.selectionManager.isDisabled(firstKey))
     ) {
       firstKey = listState.collection.getKeyAfter(firstKey);
@@ -245,7 +245,7 @@ function List<Value extends React.Key>({
 
     while (
       lastKey &&
-      (listState.collection.getItem(lastKey).type === 'section' ||
+      (listState.collection.getItem(lastKey)?.type === 'section' ||
         listState.selectionManager.isDisabled(lastKey))
     ) {
       lastKey = listState.collection.getKeyBefore(lastKey);

static/app/components/dropdownMenu/item.tsx

@@ -105,7 +105,8 @@ function BaseDropdownMenuItem(
   const ref = useRef<HTMLLIElement | null>(null);
   const isDisabled = state.disabledKeys.has(node.key);
   const isFocused = state.selectionManager.focusedKey === node.key;
-  const {key, onAction, to, label, isSubmenu, ...itemProps} = node.value;
+  const {key, onAction, to, label, isSubmenu, trailingItems, ...itemProps} =
+    node.value ?? {};
   const {size} = node.props;
 
   const actionHandler = () => {
@@ -116,7 +117,7 @@ function BaseDropdownMenuItem(
       state.selectionManager.toggleSelection(node.key);
       return;
     }
-    onAction?.(key);
+    key && onAction?.(key);
   };
 
   // Open submenu on hover
@@ -211,17 +212,19 @@ function BaseDropdownMenuItem(
       innerWrapProps={innerWrapProps}
       labelProps={labelProps}
       detailsProps={descriptionProps}
-      size={size}
-      {...mergedProps}
-      {...itemProps}
-      {...(isSubmenu && {
-        trailingItems: (
+      trailingItems={
+        isSubmenu ? (
           <Fragment>
-            {itemProps.trailingItems}
+            {trailingItems}
             <IconChevron size="xs" direction="right" aria-hidden="true" />
           </Fragment>
-        ),
-      })}
+        ) : (
+          trailingItems
+        )
+      }
+      size={size}
+      {...mergedProps}
+      {...itemProps}
     />
   );
 }

static/app/components/dropdownMenu/list.tsx

@@ -105,7 +105,7 @@ function DropdownMenuList({
     // logically follows from the tree-like structure and single-selection
     // nature of menus.
     const isLeafSubmenu = !stateCollection.some(node => {
-      const isSection = node.hasChildNodes && !node.value.isSubmenu;
+      const isSection = node.hasChildNodes && !node.value?.isSubmenu;
       // A submenu with key [key] is expanded if
       // state.selectionManager.isSelected([key]) = true
       return isSection
@@ -148,7 +148,7 @@ function DropdownMenuList({
 
   // Render a submenu whose trigger button is a menu item
   const renderItemWithSubmenu = (node: Node<MenuItemProps>, isLastNode: boolean) => {
-    if (!node.value.children) {
+    if (!node.value?.children) {
       return null;
     }
 
@@ -208,7 +208,7 @@ function DropdownMenuList({
           </DropdownMenuSection>
         );
       } else {
-        itemToRender = node.value.isSubmenu
+        itemToRender = node.value?.isSubmenu
           ? renderItemWithSubmenu(node, isLastNode)
           : renderItem(node, isLastNode);
       }

static/app/components/tabs/tabList.tsx

@@ -7,7 +7,7 @@ import {ListCollection} from '@react-stately/list';
 import {useTabListState} from '@react-stately/tabs';
 import {Node, Orientation} from '@react-types/shared';
 
-import {CompactSelect} from 'sentry/components/compactSelect';
+import {CompactSelect, SelectOption} from 'sentry/components/compactSelect';
 import DropdownButton from 'sentry/components/dropdownButton';
 import {IconEllipsis} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -151,17 +151,20 @@ function BaseTabList({
       (a, b) => sortedKeys.indexOf(a) - sortedKeys.indexOf(b)
     );
 
-    return sortedOverflowTabs
-      .filter(key => state.collection.getItem(key))
-      .map(key => {
-        const item = state.collection.getItem(key);
-        return {
-          value: key,
-          label: item.props.children,
-          disabled: item.props.disabled,
-          textValue: item.textValue,
-        };
-      });
+    return sortedOverflowTabs.flatMap<SelectOption<React.Key>>(key => {
+      const item = state.collection.getItem(key);
+
+      if (!item) {
+        return [];
+      }
+
+      return {
+        value: key,
+        label: item.props.children,
+        disabled: item.props.disabled,
+        textValue: item.textValue,
+      };
+    });
   }, [state.collection, overflowTabs]);
 
   return (