Fix TextArea DOM ref when specifying textAreaComponent

[kinke]

I tried using the react-textarea-autosize component via

import Textarea from 'react-textarea-autosize';
...
<ReactTextareaAutocomplete textAreaComponent={{ component: Textarea, ref: 'inputRef' }} />

and it failed, as the callback is firstly invoked correctly for its inputRef, but later also for its ref, so that textareaRef points to the Textarea element instead of the DOM textarea. Also make sure the innerRef prop is invoked with the DOM textarea, and don't use a fresh lambda for each render (which causes the previous lambda to be invoked with nil before invoking the new one with the DOM element).

[jukben]

Thank you for this! I was checking this part of codebase via https://github.com/webscopeio/react-textarea-autocomplete/issues/129 and I have seen this particular issue as well. I just haven't got time to revisit it - still on my TODO. The default API version with textAreaComponent was working though so I gave it a lower priority.

You rock! 💪

P.S: Are you able to fix Flow issues? 🙏

[jukben]

(bot)

Hey! Thank you so much for your PR! I can see that everything is green 👏.

Here is the playground for this revision 🚀

I hope everything is fine! ❤️

[kinke]

Thx - I hacked around the flow issues; fixing those properly would mean a lot more work. ;)

[jukben]

Agree. The Flow is super old and rusty in this project. This gonna be a lot of work to make it shiny.

[jukben]

Released as 4.2.4 🚀 Thanks!

[kinke]

Oh wow, thanks a lot! :+1:

[oklas]

Hi @kinke, Your first post snippet has ref: 'inputRef'. Do you suppose ref: 'innerRef' instead? If so, could you create fix edition

[kinke]

Nope, inputRef is intended and specific to react-textarea-autosize.

[oklas]

An confusion appears with these textareas. Also react-autosize-textarea exists but innerRef is intended to it. And with these packages names and usages mostly no noticeable differences. This confisions leads to hardly detectable problems although there is nothing special to fix.