在 react-select 中以编程方式聚焦和 select 值

Question

I want to be able to programmatically focus() and select() a react-select . Clicking on Add new brand below:

should render something like this:

Here's what I have so far.

My Select component is wrapped in React.forwardRef :

const Select = React.forwardRef((props, ref) => {
  return (
    <Creatable ref={ref} {...props} />
  )
})

so that I can style it with styled-components and still have a ref to its input, like so:

const BrandSelect = styled(Select)`...`
const Button = styled.button`...`

const MyComponent = () => {

  const brandSelectRef = useRef()
  const [newBrand, setNewBrand] = useState(false)

  const handleAddBrand = () => {
    setNewBrand(true)
    console.log(brandSelectRef.current)
    if (brandSelectRef && brandSelectRef.current) {
      brandSelectRef.current.focus()
      brandSelectRef.current.select()
    }
  }

  return (
    <BrandSelect
      creatable
      openMenuOnFocus
      ref={brandSelectRef}
      defaultInputValue={newBrand ? '...' : undefined}
      // ...other required react-select props
    />
    <Button onClick={handleAddBrand}>Add new brand</Button>
  )
}

The problem is, though, that the above code doesn't work, ie react-select never gets focused. Also, the log brandSelectRef.current is undefined .

I'm clearly doing something wrong here, but I can't spot what.

Answer 1

I think the cause is that you have to use default value for your useRef hook

const brandSelectRef = useRef(null)