inputRef keeps triggering

[Pomax]

The inputRef function seems to get triggered an inordinate number of times - I had expected it to fire once during the DebounceInput's componentDidMount lifecycle function, but instead it also fires (twice) for every key input sent into the DebounceInput component.

Updating https://codepen.io/nkbt/pen/VvmzLQ?editors=0010 to have an extra line of code at L89 that looks like inputRef={ ref => console.log('ref triggered. Actual data?', !!ref) }, and looking at the console, you should see more console output than should reasonably be the case while typing in the textfield =)

Also it seems to trigger twice, where the first call doesn't actually have a ref to work with, while the second call does. Not sure why, but that also seems a bit odd.

[nkbt]

Thanks heaps for an example. I’ll have a look when I’m back from holidays

…

-- Nik Butenko [email protected] http://github.com/nkbt

[oyeanuj]

@Pomax Did you end up with a solution here?

[Pomax]

not one I would advocate, we just put some nonsense in place while we waited for @nkbt to have a better look than we could.

[nkbt]

It does not make too much sense to me either since there is no underlying element re-creation in place so react should mount and unmount it again (but it does!). Will have to remove props one by one to see which is causing unnecessary unmount =(

[Pomax]

Those are the bad cases to debug =( Many thanks for having a look, though!

[stahlmanDesign]

Does DebounceInput involve function components? That might be the problem.

I was trying to assign focus a DebounceInput element created dynamically after hitting Enter.

If I change it to a normal input element it works.

React documentation says:

You may not use the ref attribute on function components because they don’t have instances.

https://reactjs.org/docs/refs-and-the-dom.html

EDIT: I found the solution: use inputRef instead of ref #112 (comment)

But for me I was rendering an element other than 'input', so it still doesn't work but I it's probably outside the scope of DebounceInput to pass a ref to another component. In my case TextAreaAutosize https://github.com/andreypopp/react-textarea-autosize