How to make the dropdown stay left and not follow the cursor

[WWie]

Hello,

thanks for the great control. I am using it for a text area that is to the far right of my screen. When I start typing, the dropdown moves with the cursor position. When I get closer to the right screen border, the dropdown becomes smaller and smaller.

I already tried "placement: 'absleft'", but that moves it all the way to the left of the screen. I also attempted putting another element just below and using that for 'appendTo'. Did not work either.

I noticed that the script is calculating the left offset in pixels and adding to the element style.

Is there a way to tell it to stay at the start of the text area instead of moving with the cursor?

[laurentsenta]

Hi there, thanks for providing this library, I just moved out of react-specific libs because they don't handle certain cases. This lib works very well out of the box for my use cases.

Is there any way to get the behavior described here?

[yuku]

@lsenta Do you want a UI like typeahead.js? If yes, the answer is no. Textcomplete doesn't support such UI now.

[laurentsenta]

My bad, the description of this issue might not be exactly what I'm looking for.

If you try to autocomplete in https://yuku.takahashi.coffee/textcomplete/ you'll see the autocomplete dropdown moves with the cursor as you type.

But if you look at the gif on this project's README, https://github.com/yuku/textcomplete/raw/main/docs/images/demo.gif the
autocomplete dropdown does not move as you type.

That's the behavior I'm looking for.

You'll see this behavior in github mentions, vscode autocomplete, jetbrain autocomplete, roamresearch autocomplete, etc.

[yuku]

I understand.

When a user inputs, the Dropdown.prototype.render method is called and the associated element's position is updated by calling setOffset here.

Probably, it can be implemented as follows. I'll take a closer look later.
(Note that there isn't the keepInitPosition option)

this.setStrategyId(searchResults[0])
  .renderEdge(searchResults, "header")
  .renderItems()
  .renderEdge(searchResults, "footer")
  .activate(0)
if (this.shown && this.options.keepInitPosition) {
  // Don't call setOffset if it has already been rendered
  // and the option is given.
} else {
  this
    .show()
    .setOffset(cursorOffset)
}