open-metadata · chirag-madlani · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026
@@ -250,6 +250,10 @@ export const NavAccountCard = ({
             <ChevronSelectorVertical className="tw:size-4 tw:shrink-0" />
           </AriaButton>
           <AriaPopover
+            // Non-modal: modal popovers apply aria-hidden to the rest of the
+            // page and leak it permanently on abrupt unmount — see
+            // base/select/popover.tsx.
+            isNonModal
             className={({ isEntering, isExiting }) =>
               cx(
                 'tw:origin-(--trigger-anchor-point) tw:will-change-transform',

@@ -70,6 +70,9 @@ export const Popover = ({
 }: PopoverProps) => {
   return (
     <AriaPopover
+      // Non-modal: modal popovers apply aria-hidden to the rest of the page
+      // and leak it permanently on abrupt unmount — see base/select/popover.tsx.
+      isNonModal
       offset={offset}
       {...popoverProps}
       className={(state) =>

@@ -141,6 +141,11 @@ const DropdownPopover = (props: DropdownPopoverProps) => {
 
   return (
     <AriaPopover
+      // Menus are non-modal (ARIA menu-button pattern). Modal popovers apply
+      // aria-hidden to the rest of the page and leak it permanently when the
+      // popover unmounts abruptly, leaving the app invisible to the
+      // accessibility tree — see the identical fix in base/select/popover.tsx.
+      isNonModal
       placement={placement}
       {...rest}
       className={(state) =>

@@ -227,7 +227,16 @@ export const ComboBox = ({
 
   return (
     <SelectContext.Provider value={selectContextValue}>
-      <AriaComboBox menuTrigger="focus" {...otherProps}>
+      {/* items must live on the ComboBox (not the inner ListBox) so React
+          Aria owns the collection. Using controlled `items` (not defaultItems)
+          ensures that callers who manage their own item list — e.g. async
+          loaders that call setItems() after a fetch — see updates reflected in
+          the dropdown.  The previous `defaultItems` form only initialised the
+          internal collection once and silently ignored subsequent prop changes
+          (standard uncontrolled-state behaviour). With `items` being
+          controlled, callers that want client-side filtering must do it
+          themselves before passing items in. */}
+      <AriaComboBox items={items} menuTrigger="focus" {...otherProps}>
         {(state) => (
           <div className="tw:flex tw:flex-col tw:gap-1.5">
             {otherProps.label && (
@@ -253,7 +262,6 @@ export const ComboBox = ({
               triggerRef={triggerRef}>
               <AriaListBox
                 className="tw:size-full tw:outline-hidden"
-                items={items}
                 renderEmptyState={() => (
                   <SelectEmptyState emptyState={emptyState} />
                 )}>

@@ -37,7 +37,6 @@ import {
   ComboBoxStateContext,
 } from 'react-aria-components';
 import type { ListData } from 'react-stately';
-import { useListData } from 'react-stately';
 import { SelectItem } from './select-item';
 
 interface ComboBoxValueProps
@@ -280,6 +279,7 @@ export const MultiSelectBase = ({
   onItemInserted,
   shortcut,
   placeholder = 'Search',
+  onInputChange: onInputChangeProp,
   // Omit these props to avoid conflicts with the `Select` component
   name: _name,
   className: _className,
@@ -298,10 +298,15 @@ export const MultiSelectBase = ({
     [contains, selectedKeys]
   );
 
-  const accessibleList = useListData({
-    initialItems: items,
-    filter,
-  });
+  // Derive the visible options from the live `items` prop instead of
+  // useListData({ initialItems }) — that hook snapshots the items on mount,
+  // so async consumers that fetch options on input change never see their
+  // results reflected in the popup.
+  const [filterText, setFilterText] = useState('');
+  const filteredItems = useMemo(
+    () => (items ?? []).filter((item) => filter(item, filterText)),
+    [items, filter, filterText]
+  );
 
   const onRemove = useCallback(
     (keys: Set<Key>) => {
@@ -322,7 +327,7 @@ export const MultiSelectBase = ({
       return;
     }
 
-    const item = accessibleList.getItem(id);
+    const item = (items ?? []).find((currentItem) => currentItem.id === id);
 
     if (!item) {
       return;
@@ -333,14 +338,18 @@ export const MultiSelectBase = ({
       onItemInserted?.(id);
     }
 
-    accessibleList.setFilterText('');
+    setFilterText('');
   };
 
   const onInputChange = useCallback(
     (value: string) => {
-      accessibleList.setFilterText(value);
+      setFilterText(value);
+      // Chain the consumer's handler — the internal one is applied after
+      // {...props} on AriaComboBox and would otherwise silently drop it
+      // (async search widgets rely on it to fetch matching options).
+      onInputChangeProp?.(value);
     },
-    [accessibleList]
+    [onInputChangeProp]
   );
 
   const placeholderRef = useRef<HTMLDivElement>(null);
@@ -370,8 +379,8 @@ export const MultiSelectBase = ({
     <ComboboxContext.Provider value={contextValues}>
       <AriaComboBox
         allowsEmptyCollection
-        inputValue={accessibleList.filterText}
-        items={accessibleList.items}
+        inputValue={filterText}
+        items={filteredItems}
         menuTrigger="focus"
         // This keeps the combobox popover open and the input value unchanged when an item is selected.
         selectedKey={null}

@@ -10,6 +10,12 @@ interface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {
 export const Popover = (props: PopoverProps) => {
   return (
     <AriaPopover
+      // Combobox/select popups must be non-modal: modal popovers apply
+      // aria-hidden to the rest of the page (ariaHideOutside), and when the
+      // popover unmounts abruptly (its owner re-renders away) that cleanup
+      // never runs — leaving the whole app invisible to the accessibility
+      // tree (and to role-based queries) while looking perfectly normal.
+      isNonModal
       containerPadding={0}
       offset={4}
       placement="bottom"

@@ -76,6 +76,7 @@
       topic1.create(apiContext),
       topic2.create(apiContext),
     ]);
+
     glossaryEntity = new Glossary(undefined, [
       {
         id: user.responseData.id,
@@ -453,23 +454,24 @@
         const ruleLocator = page.locator('.rule').nth(0);
         await selectOption(
           page,
-          ruleLocator.locator('.rule--field .ant-select'),
+          ruleLocator.locator('.rule--field'),
           'Status',
           true
         );
-        await selectOption(
-          page,
-          ruleLocator.locator('.rule--operator .ant-select'),
-          '=='
-        );
+        await selectOption(page, ruleLocator.locator('.rule--operator'), '==');
       });
 
       await test.step('Open Status value dropdown and verify all hard-coded options appear', async () => {
         const ruleLocator = page.locator('.rule').nth(0);
-        await ruleLocator.locator('.widget--widget > .ant-select').click();
+        const triggerBtn = ruleLocator.locator(
+          '.widget--widget button[aria-haspopup="listbox"]'
+        );
+
+        await expect(triggerBtn).toBeVisible();
+        await triggerBtn.click();
 
         const dropdown = page
-          .locator('.ant-select-dropdown')
+          .locator('[role="listbox"]')
           .filter({ hasText: EntityStatus.Approved })
           .last();
 
@@ -478,7 +480,7 @@
         for (const status of ENTITY_STATUSES) {
           await expect(
             dropdown
-              .locator('.ant-select-item-option')
+              .getByRole('option')
               .filter({ hasText: new RegExp(`^${status}$`, 'i') })
               .first()
           ).toBeVisible();
@@ -1638,83 +1640,48 @@
 
       await selectOption(
         page,
-        ruleLocator.locator('.rule--field .ant-select'),
+        ruleLocator.locator('.rule--field'),
         'Custom Properties',
         true
       );
       await selectOption(
         page,
-        ruleLocator.locator('.rule--field .ant-select'),
+        ruleLocator.locator('.rule--field'),
         'Table',
         true
       );
       await selectOption(
         page,
-        ruleLocator.locator('.rule--field .ant-select'),
+        ruleLocator.locator('.rule--field'),
         enumCPName,
         true
       );
       await selectOption(
         page,
-        ruleLocator.locator('.rule--operator .ant-select'),
+        ruleLocator.locator('.rule--operator'),
         'Equals'
       );
 
-      const valueSelector = ruleLocator.locator(
-        '.ant-select-selection-overflow'
+      const comboboxInput = ruleLocator.locator(
+        '.rule--widget input[role="combobox"]'
       );
 
-      await expect(valueSelector).toBeVisible({ timeout: 15000 });
-      await valueSelector.click();
+      await expect(comboboxInput).toBeVisible({ timeout: 15000 });
+      // fill('') focuses the input (menuTrigger="focus" opens the popup)
+      // without pointer-clicking — the overlaid chevron button can intercept
+      // clicks at the input's center in narrow ComboBoxes.
+      await comboboxInput.fill('');
 
-      const dropdown = page.locator('.ant-select-dropdown:visible').last();
+      const dropdown = page.locator('[role="listbox"]:visible').last();
 
       await expect(dropdown).toBeVisible();
 
-      return { ruleLocator, valueSelector, dropdown };
+      return { ruleLocator, comboboxInput, dropdown };
     };
 
-    test('should append page-2 items and make them visible when Load more button is clicked', async ({
-      page,
-    }) => {
-      test.slow();
-
-      const { dropdown } = await openEnumValueDropdown(page);
-
-      // Page 1 items present; page-2 item not yet visible
-      await expect(
-        dropdown.locator(`[title="${FIRST_PAGE_VALUE}"]`)
-      ).toBeVisible({ timeout: 10000 });
-      await expect(
-        dropdown.locator(`[title="${SECOND_PAGE_VALUE}"]`)
-      ).not.toBeVisible();
-
-      // "Load more..." button visible at the bottom of the list
-      const loadMoreBtn = dropdown
-        .locator('a')
-        .filter({ hasText: /load more/i });
-
-      await expect(loadMoreBtn).toBeVisible();
-
-      // Click Load more → page-2 items append
-      await loadMoreBtn.click();
-
-      // Hover over the virtual list so mouse wheel events target it
-      const virtualListHolder = dropdown.locator('.rc-virtual-list-holder');
-
-      await expect(virtualListHolder).toBeVisible();
-      await virtualListHolder.hover();
-
-      // Wheel-scroll in small increments until the page-2 item comes into view
-      const secondPageItem = dropdown.locator(`[title="${SECOND_PAGE_VALUE}"]`);
-      let found = await secondPageItem.isVisible();
-
-      for (let i = 0; i < 20 && !found; i++) {
-        await page.mouse.wheel(0, 200);
-        found = await secondPageItem.isVisible();
-      }
-
-      await expect(secondPageItem).toBeVisible({ timeout: 5000 });
+    test.skip('should append page-2 items and make them visible when Load more button is clicked', () => {
+      // Load more and rc-virtual-list are Ant Design Select features not present
+      // in the new react-aria MultiSelect component.
     });
 
     test('should find page-2 items via search without clicking Load more', async ({
@@ -1726,22 +1693,22 @@
 
       // Page 1 items load; page-2 item is not yet visible
       await expect(
-        dropdown.locator(`[title="${FIRST_PAGE_VALUE}"]`)
+        dropdown.getByRole('option', { name: FIRST_PAGE_VALUE })
       ).toBeVisible({ timeout: 10000 });
       await expect(
-        dropdown.locator(`[title="${SECOND_PAGE_VALUE}"]`)
+        dropdown.getByRole('option', { name: SECOND_PAGE_VALUE })
       ).not.toBeVisible();
 
       // Type to search — asyncFetch filters the full values array, not just the loaded page
       const searchInput = ruleLocator.locator(
-        '.rule--widget .ant-select-selection-search-input'
+        '.rule--widget input[role="combobox"]'
       );
 
       await searchInput.fill(SECOND_PAGE_VALUE);
 
       // Item appears immediately without clicking Load more
       await expect(
-        dropdown.locator(`[title="${SECOND_PAGE_VALUE}"]`)
+        dropdown.getByRole('option', { name: SECOND_PAGE_VALUE })
       ).toBeVisible({ timeout: 10000 });
     });
   }

@@ -58,27 +58,17 @@ test.describe('Advanced Search Suggestions', () => {
 
       await selectOption(
         page,
-        ruleLocator.locator('.rule--field .ant-select'),
+        ruleLocator.locator('.rule--field'),
         field.label,
         true
       );
 
-      await selectOption(
-        page,
-        ruleLocator.locator('.rule--operator .ant-select'),
-        '=='
-      );
+      await selectOption(page, ruleLocator.locator('.rule--operator'), '==');
 
       const dropdownInput = ruleLocator.locator(
-        '.widget--widget > .ant-select > .ant-select-selector input'
+        '.widget--widget input[role="combobox"]'
       );
 
-      const aggregateRes1 = page.waitForResponse('/api/v1/search/aggregate?*');
-
-      await dropdownInput.click();
-
-      await aggregateRes1;
-
       const searchText = toLower(
         getFieldsSuggestionSearchText(field.label, testData.fieldSearchData)
       );
@@ -95,7 +85,10 @@ test.describe('Advanced Search Suggestions', () => {
 
       await test
         .expect(
-          page.locator(`.ant-select-dropdown:visible [title="${searchText}"]`)
+          page
+            .locator('[role="listbox"]:visible [role="option"]')
+            .filter({ hasText: searchText })
+            .first()
         )
         .toBeVisible();
     });