add data attribute to react-select

Author: Tatsiana Kostsikava

.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

docs/examples/BasicMulti.tsx

@@ -11,5 +11,8 @@ export default () => (
     options={colourOptions}
     className="basic-multi-select"
     classNamePrefix="select"
+    dataAttributes={{
+      'data-testid': 'basic-multi-select'
+    }}
   />
 );

docs/examples/BasicSingle.tsx

@@ -30,6 +30,9 @@ export default () => {
         isSearchable={isSearchable}
         name="color"
         options={colourOptions}
+        dataAttributes={{
+          'data-testid': 'basic-single-select'
+        }}
       />
 
       <div

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>;
+};

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 />