From 90d261487d0d6bf2f29abde7e79fe2c013539aa2 Mon Sep 17 00:00:00 2001
From: Tatsiana Kostsikava <tatsiana.kostsikava@Tatsianas-MacBook-Pro.local>
Date: Fri, 24 Oct 2025 14:20:38 +0200
Subject: [PATCH 1/4] add data attribute to react-select

---
 .changeset/strange-grapes-mix.md              |  5 +++++
 docs/examples/BasicMulti.tsx                  |  3 +++
 docs/examples/BasicSingle.tsx                 |  3 +++
 packages/react-select/src/Select.tsx          | 10 +++++++--
 .../src/__tests__/Select.test.tsx             | 21 +++++++++++++++++++
 5 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/strange-grapes-mix.md

diff --git a/.changeset/strange-grapes-mix.md b/.changeset/strange-grapes-mix.md
new file mode 100644
index 0000000000..b76bfbbef7
--- /dev/null
+++ b/.changeset/strange-grapes-mix.md
@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Add `dataAttributes` prop to allow passing data attributes (e.g., `data-testid`) to the select container
diff --git a/docs/examples/BasicMulti.tsx b/docs/examples/BasicMulti.tsx
index 9cc30d6d43..c6254eeb56 100644
--- a/docs/examples/BasicMulti.tsx
+++ b/docs/examples/BasicMulti.tsx
@@ -11,5 +11,8 @@ export default () => (
     options={colourOptions}
     className="basic-multi-select"
     classNamePrefix="select"
+    dataAttributes={{
+      'data-testid': 'basic-multi-select'
+    }}
   />
 );
diff --git a/docs/examples/BasicSingle.tsx b/docs/examples/BasicSingle.tsx
index 872b56c330..60a3a5e9bf 100644
--- a/docs/examples/BasicSingle.tsx
+++ b/docs/examples/BasicSingle.tsx
@@ -30,6 +30,9 @@ export default () => {
         isSearchable={isSearchable}
         name="color"
         options={colourOptions}
+        dataAttributes={{
+          'data-testid': 'basic-single-select'
+        }}
       />
 
       <div
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 146d084e20..e6024f5add 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -277,6 +277,8 @@ export interface Props<
   form?: string;
   /** Marks the value-holding input as required for form validation */
   required?: boolean;
+  /** Data attributes to be applied to the select container */
+  dataAttributes?: Record<string, string>;
 }
 
 export const defaultProps = {
@@ -2202,7 +2204,7 @@ export default class Select<
     const { Control, IndicatorsContainer, SelectContainer, ValueContainer } =
       this.getComponents();
 
-    const { className, id, isDisabled, menuIsOpen } = this.props;
+    const { className, id, isDisabled, menuIsOpen, dataAttributes } = this.props;
     const { isFocused } = this.state;
     const commonProps = (this.commonProps = this.getCommonProps());
 
@@ -2213,6 +2215,7 @@ export default class Select<
         innerProps={{
           id: id,
           onKeyDown: this.onKeyDown,
+          ...dataAttributes,
         }}
         isDisabled={isDisabled}
         isFocused={isFocused}
@@ -2251,4 +2254,7 @@ export type PublicBaseSelectProps<
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
-> = JSX.LibraryManagedAttributes<typeof Select, Props<Option, IsMulti, Group>>;
+> = JSX.LibraryManagedAttributes<typeof Select, Props<Option, IsMulti, Group>> & {
+  /** Data attributes to be applied to the select container */
+  dataAttributes?: Record<string, string>;
+};
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 0313149095..49ab07d81a 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2318,6 +2318,27 @@ cases(
   }
 );
 
+cases(
+  'accessibility > passes through dataAttributes prop',
+  ({ props = { ...BASIC_PROPS, dataAttributes: { 'data-testid': 'test-select' } } }) => {
+    let { container } = render(<Select {...props} />);
+    // The data attributes should be on the outermost div (SelectContainer)
+    const selectContainer = container.querySelector('div[data-testid]');
+    expect(selectContainer).toBeTruthy();
+    expect(selectContainer!.getAttribute('data-testid')).toBe('test-select');
+  },
+  {
+    'single select > should pass dataAttributes prop down to container': {},
+    'multi select > should pass dataAttributes prop down to container': {
+      props: {
+        ...BASIC_PROPS,
+        dataAttributes: { 'data-testid': 'test-select' },
+        isMulti: true,
+      },
+    },
+  }
+);
+
 test('accessibility > to show the number of options available in A11yText when the menu is Open', () => {
   let { container, rerender } = render(
     <Select {...BASIC_PROPS} inputValue={''} autoFocus menuIsOpen />

From 2e99e422ed0505f81d5a790a838f122832c52a85 Mon Sep 17 00:00:00 2001
From: Tatsiana Kostsikava <tatsiana.kostsikava@Tatsianas-MacBook-Pro.local>
Date: Sun, 9 Nov 2025 22:55:33 +0100
Subject: [PATCH 2/4] fix typo

---
 packages/react-select/src/__tests__/Select.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 49ab07d81a..c2145a114a 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2328,8 +2328,8 @@ cases(
     expect(selectContainer!.getAttribute('data-testid')).toBe('test-select');
   },
   {
-    'single select > should pass dataAttributes prop down to container': {},
-    'multi select > should pass dataAttributes prop down to container': {
+    'single select > should pass dataAttributes prop down to the container': {},
+    'multi select > should pass dataAttributes prop down to the container': {
       props: {
         ...BASIC_PROPS,
         dataAttributes: { 'data-testid': 'test-select' },

From af24b4c6c2df6363d7948e5fab1f0add6a407e84 Mon Sep 17 00:00:00 2001
From: Tatsiana Kostsikava <tatsiana.kostsikava@Tatsianas-MacBook-Pro.local>
Date: Sun, 9 Nov 2025 23:27:59 +0100
Subject: [PATCH 3/4] set dataAttributes as empty object by default

---
 packages/react-select/src/Select.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index e6024f5add..bcd0578ded 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -2215,7 +2215,7 @@ export default class Select<
         innerProps={{
           id: id,
           onKeyDown: this.onKeyDown,
-          ...dataAttributes,
+          ...(dataAttributes || {}),
         }}
         isDisabled={isDisabled}
         isFocused={isFocused}
@@ -2254,7 +2254,4 @@ export type PublicBaseSelectProps<
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
-> = JSX.LibraryManagedAttributes<typeof Select, Props<Option, IsMulti, Group>> & {
-  /** Data attributes to be applied to the select container */
-  dataAttributes?: Record<string, string>;
-};
+> = JSX.LibraryManagedAttributes<typeof Select, Props<Option, IsMulti, Group>>;

From efbbb98a535c0559b6dc9a0b3e2874bce2ee06f7 Mon Sep 17 00:00:00 2001
From: Tatsiana Kostsikava <tatsiana.kostsikava@Tatsianas-MacBook-Pro.local>
Date: Mon, 10 Nov 2025 15:10:14 +0100
Subject: [PATCH 4/4] fix lint

---
 docs/examples/BasicMulti.tsx                        | 2 +-
 docs/examples/BasicSingle.tsx                       | 2 +-
 packages/react-select/src/Select.tsx                | 9 +++++++--
 packages/react-select/src/__tests__/Select.test.tsx | 7 ++++++-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/docs/examples/BasicMulti.tsx b/docs/examples/BasicMulti.tsx
index c6254eeb56..80f3a08a6a 100644
--- a/docs/examples/BasicMulti.tsx
+++ b/docs/examples/BasicMulti.tsx
@@ -12,7 +12,7 @@ export default () => (
     className="basic-multi-select"
     classNamePrefix="select"
     dataAttributes={{
-      'data-testid': 'basic-multi-select'
+      'data-testid': 'basic-multi-select',
     }}
   />
 );
diff --git a/docs/examples/BasicSingle.tsx b/docs/examples/BasicSingle.tsx
index 60a3a5e9bf..f6d02aeb09 100644
--- a/docs/examples/BasicSingle.tsx
+++ b/docs/examples/BasicSingle.tsx
@@ -31,7 +31,7 @@ export default () => {
         name="color"
         options={colourOptions}
         dataAttributes={{
-          'data-testid': 'basic-single-select'
+          'data-testid': 'basic-single-select',
         }}
       />
 
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index bcd0578ded..d50e92411d 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -407,7 +407,11 @@ function buildCategorizedOptions<
 ): CategorizedGroupOrOption<Option, Group>[] {
   return props.options
     .map((groupOrOption, groupOrOptionIndex) => {
-      if ('options' in groupOrOption) {
+      if (
+        groupOrOption &&
+        typeof groupOrOption === 'object' &&
+        'options' in groupOrOption
+      ) {
         const categorizedOptions = groupOrOption.options
           .map((option, optionIndex) =>
             toCategorizedOption(props, option, selectValue, optionIndex)
@@ -2204,7 +2208,8 @@ export default class Select<
     const { Control, IndicatorsContainer, SelectContainer, ValueContainer } =
       this.getComponents();
 
-    const { className, id, isDisabled, menuIsOpen, dataAttributes } = this.props;
+    const { className, id, isDisabled, menuIsOpen, dataAttributes } =
+      this.props;
     const { isFocused } = this.state;
     const commonProps = (this.commonProps = this.getCommonProps());
 
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index c2145a114a..7b24d7ec04 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2320,7 +2320,12 @@ cases(
 
 cases(
   'accessibility > passes through dataAttributes prop',
-  ({ props = { ...BASIC_PROPS, dataAttributes: { 'data-testid': 'test-select' } } }) => {
+  ({
+    props = {
+      ...BASIC_PROPS,
+      dataAttributes: { 'data-testid': 'test-select' },
+    },
+  }) => {
     let { container } = render(<Select {...props} />);
     // The data attributes should be on the outermost div (SelectContainer)
     const selectContainer = container.querySelector('div[data-testid]');