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..80f3a08a6a 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..f6d02aeb09 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', + }} />
; } export const defaultProps = { @@ -405,7 +407,11 @@ function buildCategorizedOptions< ): CategorizedGroupOrOption[] { 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) @@ -2202,7 +2208,8 @@ 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 +2220,7 @@ export default class Select< innerProps={{ id: id, onKeyDown: this.onKeyDown, + ...(dataAttributes || {}), }} isDisabled={isDisabled} isFocused={isFocused} diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx index 0313149095..7b24d7ec04 100644 --- a/packages/react-select/src/__tests__/Select.test.tsx +++ b/packages/react-select/src/__tests__/Select.test.tsx @@ -2318,6 +2318,32 @@ cases( } ); +cases( + 'accessibility > passes through dataAttributes prop', + ({ + props = { + ...BASIC_PROPS, + dataAttributes: { 'data-testid': 'test-select' }, + }, + }) => { + let { container } = render(