Custom data attributes and other Custom Component Things

[Cuttsy27]

Hi,

I'd like to add some data attributes through our select component (data-test-id) for testing purposes. I've been looking into the Custom Component feature as this is the only way I've found to add the data attributes. However, the only way I've found to be able to do it is to make the custom component just an extra div with the data-test-id attribute, then the original component (eg. <components.SelectContainer>) inside that div.

This would mean adding a whole extra element everywhere I want to add a data attribute which seems incorrect. I also tried returning the div directly as the custom component by spreading innerProps etc, but the react-select generated CSS classes were gone. Is there an easy way to keep the classes attached? Or an easier way to use data attributes?

[ebonow]

Greetings @Cuttsy27 ,

Custom components accept a prop called innerProps which are passed to the component's root element.

const SelectContainer = props => {
  <components.SelectContainer 
    {...props} 
    innerProps={{...props.innerProps, 'data-test-id': 'some-id' }}
  />
)

codesandbox demo

Please note that there are a few exceptions currently (Input, GroupHeading) that instead pass extra prop attributes directly to the component (this will be patched in v5).

ie:

const Input = <components.Input {...props} autocomplete="chrome-off" />

[Cuttsy27]

This is exactly what I needed. Thanks!