webscopeio / react-textarea-autocomplete

📝 React component implements configurable GitHub's like textarea autocomplete.
MIT License
454 stars 80 forks source link

Feature Request: Usage of React portal #128

Closed gargroh closed 5 years ago

gargroh commented 5 years ago

Currently as the suggestions dropdown gets appended next to textarea, it makes difficult to use this plugin for textarea inside an overflow:hidden container(that can be a form with scrollbar) or e.s. in modals/dialogs with max-height set and overflow: scroll.

In any of the cases either suggestions dropdown will be invisible(due to overflow hidden) or user needs to scroll parent container in order to see suggestions.

Is it possible to append suggestions dropdown in body using any strategy(preferably react portal)

jukben commented 5 years ago

Yeah! Good that you have raised this issue. I was already thinking about it because that's exactly the use case for Portal and indeed it would be preventing overflow issue. Since we've migrated to React 16 nothing should stop us from delivering it. Do you wanna give it shot?

gargroh commented 5 years ago

I would love to but need to have code insights(these days i am tightly packed), btw a random question how will boundariesElement option behave after this implementation, will it follow the specified element boundaries or honor window boundaries.

jukben commented 5 years ago

It should work still the same I guess. What do you think?

gargroh commented 5 years ago

Agree, it should work as it used to work before.

teilzeitgeist commented 5 years ago

Hey! I have the same wish and tried it out with the mentioned ReactDOM.createPortal() function. https://github.com/webscopeio/react-textarea-autocomplete/compare/master...Psyphant:append-dropdown-in-body?expand=1

It's working well but probably needs more testing and maybe an option for this setting.

So, what do you guys think?

jukben commented 5 years ago

Hey @Psyphant definitely open a PR for it and we can try it out. Thanks for your work!

jukben commented 5 years ago

Fixed in #149

jukben commented 5 years ago

Released as 4.4.0 🚀