react-debounce-input inputRef keeps triggering

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.

Oct 11 '17 21:10 Pomax

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

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

Oct 12 '17 02:10 nkbt

@Pomax Did you end up with a solution here?

Dec 03 '17 18:12 oyeanuj

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.

Dec 04 '17 17:12 Pomax

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 =(

Dec 05 '17 20:12 nkbt

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

Dec 07 '17 17:12 Pomax

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 https://github.com/nkbt/react-debounce-input/issues/112#issuecomment-529126593

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

Oct 07 '19 20:10 stahlmanDesign