Skip to content

Unable to Add data-testid Attribute to ReactSelect Component #6018

@sprakash-1

Description

@sprakash-1

Unable to Add data-testid Attribute to ReactSelect Component
Hi team,

I'm trying to add the data-testid attribute to the Select component from react-select for testing purposes, but it doesn't seem to be rendered in the DOM.

Here is the code I'm using:

<Select data-testid='dashboard-supplier-widgets-date-filter-select' isMulti={false} required id='dateFilterDropdown' options={WidgetsDateFilterOptions} value={{ value: props.dateFilter, label: WidgetsDateFilterOptions.find((option) => option.value === props.dateFilter)?.label, }} onChange={(selectedOption) => props.onDateFilterChange(selectedOption.value)} placeholder={t('widget_filter_text')} formatOptionLabel={formatWidgetsOptionLabel} isSearchable={false} menuPortalTarget={document.body} menuPlacement='auto' />

Even though the data-testid is passed as a prop, I don't see it applied in the rendered HTML. Is there a recommended way to add custom attributes like data-testid to the Select component?

Any guidance would be greatly appreciated.

Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue/bug-unconfirmedIssues that describe a bug that hasn't been confirmed by a maintainer yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions