React-select: Input loses focus after one character under certain circumstances

[stickfigure]

I thought I was totally crazy, but here's a repro:

https://codesandbox.io/s/m7yp2nn44p

If an Input component is defined in the render() closure, and the inputValue/onInputChange props are defined, then typing in the input box breaks after the first character. It's like the input loses focus; clicking again on the input box clears it. Consequently the select box is unusable.

You can fix this by either moving the Input definition outside render(), or commenting out the inputValue/onInputChange props.

I'm using react-select 2.0.0-beta.6 on Chrome 67.0.3396.62, typescript 2.9.1, react 16.3.2.

[AlessandroAnnini]

same here

[erfoon]

Same problem but I don't have the problem on local build and happens only when gets deployed. Also I didn't define the Input for overriding Control inside the render() and it's outside of the class (I put part of code in #3237)
So don't we have any updates or solution?

[Rall3n]

Every time the render function is fired (because of changes in the state of AsyncMulti component from @stickfigure´s example), it will create a new instance of the Input function, which triggers a re-render and replaces the previous Input component.

This example would work if you remove the props inputValue and onInputChange, but defining components in the render function is discouraged because of unnessecary rerendering and remounting.

[stickfigure]

I'm in the process of converting to hooks... and stumbling on this issue again. Only now I'm not quite sure how to solve it, because everything goes in the render method of functional components.

In a hook-based component that uses react-select, how can I define a custom Input that has access to the parent component's state or props?

Does react-select only allow component overrides in class-based components?

[stickfigure]

Deleted the 'v2' because this affects v3 as well

[qvn]

This issue can be solved with putting the component outside of the render function. Like suggested here: https://github.com/JedWatson/react-select/issues/2810.

Now, if you need to have custom props that the component needs to consumed, it is passed in the props.selectProps for every component (part of the common props). I know, I dig deep too... https://github.com/JedWatson/react-select/issues/2810#issuecomment-600785588

[ebonow]

Hi all,

This appears to be a repeat of issue 2810 (as qvn pointed out).

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you, and we'll re-open it if necessary.