From c61fe114c404f1a55db0b8eba02b0a2c48b5e0cb Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Wed, 19 Jun 2024 19:32:33 +0200
Subject: [PATCH] fix(select): connect combobox to listbox (#1665)

---
 src/components/List/List.tsx                                | 2 ++
 src/components/Select/Select.tsx                            | 3 +--
 .../Select/components/SelectControl/SelectControl.tsx       | 4 +---
 src/components/Select/components/SelectList/SelectList.tsx  | 6 +++---
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 32e18fb0cb..6c87afce04 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -133,6 +133,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
 
     render() {
         const {
+            id,
             emptyPlaceholder,
             virtualized,
             className,
@@ -158,6 +159,7 @@ export class List<T = unknown> extends React.Component<ListProps<T>, ListState<T
                     >
                         {this.renderFilter()}
                         <div
+                            id={id}
                             className={b('items', {virtualized}, itemsClassName)}
                             style={this.getItemsStyle()}
                             onMouseLeave={this.onMouseLeave}
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index f66827886a..401469487e 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -315,7 +315,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                     getOptionGroupHeight={getOptionGroupHeight}
                     loading={props.loading}
                     onLoadMore={props.onLoadMore}
-                    selectId={selectId}
+                    id={popupId}
                     onChangeActive={setActiveIndex}
                 />
             );
@@ -368,7 +368,6 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                 disablePortal={disablePortal}
                 virtualized={virtualized}
                 mobile={mobile}
-                id={popupId}
                 placement={popupPlacement}
             >
                 {renderPopup({renderFilter: _renderFilter, renderList: _renderList})}
diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
index 53cd24f3b7..d7e0f5248e 100644
--- a/src/components/Select/components/SelectControl/SelectControl.tsx
+++ b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -181,9 +181,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     aria-haspopup="listbox"
                     aria-expanded={open}
                     aria-activedescendant={
-                        activeIndex === undefined
-                            ? undefined
-                            : `${selectId}-list-item-${activeIndex}`
+                        activeIndex === undefined ? undefined : `${popupId}-item-${activeIndex}`
                     }
                     disabled={disabled}
                     onClick={handleControlClick}
diff --git a/src/components/Select/components/SelectList/SelectList.tsx b/src/components/Select/components/SelectList/SelectList.tsx
index b98dfc8108..652aa81c79 100644
--- a/src/components/Select/components/SelectList/SelectList.tsx
+++ b/src/components/Select/components/SelectList/SelectList.tsx
@@ -28,7 +28,7 @@ type SelectListProps = {
     virtualized?: boolean;
     loading?: boolean;
     onLoadMore?: () => void;
-    selectId: string;
+    id: string;
     onChangeActive: (index?: number) => void;
 };
 
@@ -49,7 +49,7 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
         mobile,
         loading,
         onLoadMore,
-        selectId,
+        id,
         onChangeActive,
     } = props;
     const items = React.useMemo(
@@ -145,7 +145,7 @@ export const SelectList = React.forwardRef<List<FlattenOption>, SelectListProps>
             renderItem={renderItem}
             onItemClick={onOptionClick}
             selectedItemIndex={selectedIndexes}
-            id={`${selectId}-list`}
+            id={id}
             role="listbox"
             onChangeActive={onChangeActive}
         />