If the editor is at the bottom of the window, better open it upwards instead.

[jukben]

Discussion: #33

The dropdown always opens downwards, but sometimes, if the editor is at the bottom of the window, better open it upwards instead.

That's really good feedback. I'd love to implement this. Could be handy and really bulletproof functionality. Also, it would be cool to support also other directions. (right - left)

Something like https://popper.js.org/#example3, maybe we should use it. I need to dig more into it.

[benoitkopp]

Is there something for this issue ?

[jukben]

@BenoKop this feature is still pending. Are you interested in sending PR for it?

[jukben]

This going to be shipped as 4.0.0! 🚀 Finally, ~1 year later. 🙉

[benoitkopp]

Nice ! When for the 4.0.0 ? I'm maintaining the project that I wrote ~1 year ago :D

[jukben]

@BenoKop Haha! It's already here https://github.com/webscopeio/react-textarea-autocomplete/releases 🚀

Also in the PR (https://github.com/webscopeio/react-textarea-autocomplete/pull/111) there is more about how it works, actually it's on by default – by default it should prevent to overflow from body element. I hope it works fine for you!

Can you try it out and write me feedback?

[benoitkopp]

Cool ! I'm not sure I can try it today :s but I will try I when I can !

[andypearson]

@jukben thanks for your hard work on this!

I'm using react-textarea-autocomplete pretty extensively over at https://paintpad.app and am excited to upgrade to get this positioning stuff sorted.

So far I've used React.createRef() to get a DOM reference to the container and am then using boundariesElement={containerRef.current} to pass it in to ReactTextareaAutocomplete but it doesn't seem to be working correctly:

I'd expect the dropdown to appear above the cursor in this situation.

Additionally the container itself is set to overflow-y: auto so maybe that is causing more weirdness...

[jukben]

@andypearson

Do you see any error in the console?

Could you please try to pass there a CSS selector instead? boundariesElement={".boundaries"}

[andypearson]

@jukben I don't see any errors at all. Switching to using a CSS selector doesn't seem to help. I did have movePopupAsYouType enabled but turning that off doesn't seem to make any difference either.

Shall I try and make a Codepen that reproduces the setup I have?

[jukben]

@andypearson yes, please do. I've tried to give it a shot, but for me, it works https://codepen.io/jukben/pen/rovaLM check it out.

[andypearson]

@jukben done: https://codepen.io/andy-pearson/pen/vvRLRP

This mimics the way I am using the component quite well.

It's weird, because comparing mine and yours, it feels like the only difference with mine is the overflow-y: auto and height: 300px in the CSS but even if I remove those the dropdown doesn't position itself like it does in your example. Potential user error alert! :D

[jukben]

@andypearson Ah I see! Could you please set height to .rta__autocomplete element? I guess the current implementation can't work without exact measurements. 😞

I'll try to experiment with this and eventually overcome it. I was quite easy to fix I hope. Could you please try 4.1.0? 🚀

(Be aware, there is actually breaking change https://github.com/webscopeio/react-textarea-autocomplete/pull/114 but I hope it's fine for you!)

[andypearson]

@jukben I'll give 4.1.0 a try next week when I'm back at work, will keep you posted!

Don't think I'm using the option you removed so should be all good :)

Cheers again for your hard work on this awesome project!

[andypearson]

@jukben I noticed that my CodePen had started working so I was quite excited, but on upgrading to 4.2.2 in my project the autocomplete still won't appear in the correct spot. :(

I went back to the CodePen and updated it until I could repeat the problem:

Here's the example URL again: https://codepen.io/andy-pearson/full/vvRLRP

Now the number of items appears randomly, there seems to be a race condition where the autocomplete doesn't quite know its own size before doing the positioning calculations.

Interestingly, this example also crashes Firefox fairly consistently with the following error:

RTA: dataProvider fails: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I think the trick would be to change _calculatePosition so that it sets the required styles directly using the DOM APIs, rather than getting React to do it with setState. Shall I try and have a go at making that change? Feel like I'm asking a lot without actually contributing!