-
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? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Greetings @Cuttsy27 , Custom components accept a prop called const SelectContainer = props => {
<components.SelectContainer
{...props}
innerProps={{...props.innerProps, 'data-test-id': 'some-id' }}
/>
) 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" /> |
Beta Was this translation helpful? Give feedback.
Greetings @Cuttsy27 ,
Custom components accept a prop called
innerProps
which are passed to the component's root element.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: