React-select: No way for us to add a STATIC and 'unique' tag in the DOM

[carlosmmelo]

This is a big headache for any QA team who automate tests using Selenium Webdriver.

Because our CSS are been constantly updated due to new requirements in our apps we need to constantly update the CSS_SELECTOR and/or XPATHs that the webdriver needs in order to locate the web elements (in this case the react-select dropdowns); in the perfect world we should be able to add IDs or Names attributes into a web element in the DOM.

When you have a page with multiple Select options we can't rely on using the class attribute (class=Select-control) because is not going to be unique in the DOM and also the data-reactid attribute is something that gets changed between the builds.

Would you please add a away that devs could add some custom attributes into the DOM other than the defaults that get build from the Select.

Thanks in advance.

[carlosmmelo]

To be more specific:

<SelectField  id="propertyType"
              label="Type"
              value={this.state.propertyType}
              name="propertyType"
              onChange={this.handleChange}
              options={this.getTypeOptions()} />
</div>

When I try to pass the ID attribute it doesn't do anything with it, I really need to have this attribute that I pass in the DOM.

[cbrewer1689]

+1

[carlosmmelo]

@dcousens wondering if anyone got the fix already?

I ask because I just did it on my local and its working, let me know if you would like me to submit the PR for it.

[DanielSundberg]

Any progress on this? I'm trying to automate this control using Selenium and I'm having the same issue.

[tony]

Yep, I'm using data-test= / dataTest in selenium tests and this would be pretty helpful!

[tony]

~On 1.x, if you use inputProps, can you get what you want?~

~https://github.com/JedWatson/react-select/tree/v1.3.0 (search for it, it's hard to link it directly)~

~You can have selenium search for data-test.~

[tony]

That won't work. You'll pass in data-test, but it's way too deep (it's a sibling to Select-value!) We need to be able to customize at the Select/Select-control level

[bogdaniy]

I'm wondering if there still no ability to pass custom tags to react-select?

[gwyneplaine]

Applying a unique className and classNamePrefix to each instance of select should resolve this problem.
As per the docs in 2.x, className is applied as part of the selector composition of the wrapping Select Container, classNamePrefix is applied as a part of the selector composition for every other semantically relevant component in the Select tree.

Here is a sandbox example of what that means
https://codesandbox.io/s/7mwl95jkmx

We don't automatically spread props passed in by consumers onto every single component, by default because there's no sane way for us to shield against invalid props being spread onto DOM elements.

If you would like to spread custom elements into a particular component, we allow you to customise components via the custom components API. Though by doing so, you're explicitly opting out of the behaviour provided by the default Select component you're replacing. See the component docs for details.

https://react-select.com/components

Closing this issue, if for some reason you feel that what I've described above doesn't correctly address your problem, please feel free to create a new issue. Mostly doing this for clarity ad to reduce our issues list down to a sane and relevant number of actionable tasks.

[elie222]

For others trying to do this. Something like this should work:

const DropdownIndicator = (
  props: ElementConfig<typeof components.DropdownIndicator>,
) => {
  return (
    <components.DropdownIndicator
      {...props}
      innerProps={{
        ...props.innerProps,
        'data-test': 'select-dropdown-indicator',
      }}
    />
  );
};

function Select({ ...props }: Props) {
  return <ReactSelect components={{ DropdownIndicator }} {...props} />;
}