CODEWITHSUNDEEP
reactjsreact-select
Marty
Marty

Reputation: 299

React-Select Custom Input Losing Focus

I am using react-select as a select dropdown. I've built my input in such a way that when the select is typed into, a debounced network request fires and then the drop down options are the result.

Code is located here:

https://codesandbox.io/embed/nameless-leftpad-o3zwl

Basically what's happening in the code above is that I'm creating an array of react selects and adding and removing one when the add or remove buttons are clicked.

I'm using the custom input so that I can get a callback ref attached to the input DOM node and auto-focus it when the "add select" button is clicked.

The first issue is this:

  1. App loads
  2. Cannot click into the first input

Second issue:

  1. App loads
  2. Click "add select"
  3. Auto focus is applied to new select
  4. Start typing and wait for the network request to resolve
  5. Click "add select"
  6. Click on previously typed-into select
  7. Try typing
  8. Observe - the input loses focus after the first character

And here's my edited version without using the callback ref entirely:

https://codesandbox.io/embed/competent-cookies-tkfhc

The issue still remains

  1. Try typing into input
  2. After one character is typed into, the focus goes to the body

Upvotes: 2

Views: 9309

Answers (1)

Marty
Marty

Reputation: 299

Answer linked on GitHub here: https://github.com/JedWatson/react-select/issues/3575

Upvotes: 2

Related Questions