React-Select: Add custom data attribute to Input

Question

I use ReactJS v18.2 with react-select v5.7.

I want to add a custom attribute (e.g. data-test) to the input element of my <Select/> component, I could not find something like this in the docs.

For my own custom functional components, it just works to add it to the html tag, e.g.

<input type="text" test={XYZ}/>

For react-select, it does not show up in the DOM at all. How can I fix it?

Answer 1

I faced the same problem and used a workaround to make it work. For that I had to create a custom input component.

import React from 'react'
import Select, { components } from 'react-select'

const CustomInput = (props) => {
  return (
    <components.Input
      {...props}
      data-test="abc" // put the value you want..
    />
  )
}

const CustomSelect = () => {
  return (
    <Select
      components={{ Input: CustomInput }}
      options={[ /* your options here */]}
    />
  )
}

export default CustomSelect