Unable to add data-testid to custom components

[Szorcu]

Hi, I am not able to add data-testid for custom components. I don't really know whether it is a bug or feature suggestion, but I feel like this should work out of the box. It feels really weird that ts is not showing any error, but provided data-testid is just not there after all.

Link to sandbox: https://codesandbox.io/s/react-select-v5-data-test-id-for-custom-components-4m5dnn?file=/SingleSelect.tsx

[IbraheemHaseeb7]

can you explain this bug, what is not achieved here?

[Szorcu]

Hey, sorry for the lack of detail. I have made the sandbox available, but not what the expected behaviour is, my bad.

Problem description My point is that, as you can see in the code sample I provided, even if I managed to add the data-testid property to the custom components component, it is not available. And in my opinion, this is strange because TS does not give any error message. This property simply disappears.

My workaround In order to make a work around for this I had to not use components component and create specific custom component from scratch to add this data-testid that is required for me when I want to write E2E tests.

Summary As I said at the begging, I am not sure if it's a bug or feature suggestion. The problem is that data-testid is just an example, but I think that any prop that is by default accepted by e.g. div should be accepted and applied to component. Or at least consider better TS support. Cause I had really hard time debugging why data-testid prop is not available after render, when TS did not give me any error.

[knuccio-aeroflow]

I'm currently running into this issue as well! Adding the data-testid through components is causing us to have to tab into the select twice if tab-ing from another input. Any workaround would be appreciated!

[ZASMan]

I'm also able to replicate this. data-test-id is commonly used to match automated testing suites so this is somewhat of a blocker for some folks

[mrasap]

For those looking for a solution, you can use innerProps. Take the Option as an example (src):

import ReactSelect, { components, GroupBase, OptionProps, Props } from 'react-select'

const YourOption = <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
  props: OptionProps<Option, IsMulti, Group>,
) => {
  return (
    <components.Option<Option, IsMulti, Group>
      {...props}
      innerProps={{ 'data-testid': 'your-testid-here', ...props.innerProps } as JSX.IntrinsicElements['div']}
    />
  )
}

export const YourSelect = <
  Option,
  IsMulti extends boolean = false,
  Group extends GroupBase<Option> = GroupBase<Option>,
>({components, ...otherProps}: Props<Option, IsMulti, Group>) => {
  return (
    <ReactSelect<Option, IsMulti, Group>
      {...otherProps}
      components={{
        Option: YourOption<Option, IsMulti, Group>,
        ...components,
      }}
    />
  )
}